女的可以学做网站,wordpress idc模板,客户管理系统软件哪家好,买保险网站目录 前言1. 基本知识2. Demo3. 实战4. 模版 前言
由于需要在登录时#xff0c;附上一些用户说明书的弹窗 对于ElMessageBox的基本知识详细了解 可通过官网了解基本的语法知识ElMessageBox官网基本知识
1. 基本知识
Element Plus 是一个基于 Vue 3 的组件库#xff0c;其中… 目录 前言1. 基本知识2. Demo3. 实战4. 模版 前言
由于需要在登录时附上一些用户说明书的弹窗 对于ElMessageBox的基本知识详细了解 可通过官网了解基本的语法知识ElMessageBox官网基本知识
1. 基本知识
Element Plus 是一个基于 Vue 3 的组件库其中包括各种类型的弹窗组件用于在网页上显示信息或与用户进行交互
主要的弹窗组件包括 ElMessageBox.alert、ElMessageBox.prompt 和 ElMessageBox.confirm 等
ElMessageBox.prompt 用于显示带有输入框的对话框 用于需要用户输入信息的场景
import { ElMessageBox } from element-plusElMessageBox.prompt(请输入你的邮箱,提示,{confirmButtonText: 确定,cancelButtonText: 取消,}
).then(({ value }) {console.log(用户输入的邮箱:, value)
}).catch(() {console.log(取消输入)
})ElMessageBox.alert 用于显示带有确认按钮的对话框 用于告知用户某些信息
import { ElMessageBox } from element-plusElMessageBox.alert(这是一段内容,标题,{confirmButtonText: 确定,callback: action {console.log(action)}}
)ElMessageBox.confirm 用于显示带有确认和取消按钮的对话框 用于需要用户确认或取消某些操作的场景
import { ElMessageBox } from element-plusElMessageBox.confirm(此操作将永久删除该文件, 是否继续?,提示,{confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}
).then(() {console.log(确认)
}).catch(() {console.log(取消)
})对于上述基本参数
参数描述title对话框的标题message对话框的消息内容可以是字符串或 HTMLtype消息类型如 success, info, warning, erroriconClass自定义图标的类名customClass对话框自定义类名showClose是否显示右上角关闭按钮默认为 truecloseOnClickModal是否可以通过点击遮罩层关闭对话框默认为 truecloseOnPressEscape是否可以通过按下 Esc 键关闭对话框默认为 trueshowCancelButton是否显示取消按钮默认为 falsecancelButtonText取消按钮的文本内容confirmButtonText确认按钮的文本内容cancelButtonClass自定义取消按钮的类名confirmButtonClass自定义确认按钮的类名beforeClose关闭前的回调函数可以用于阻止对话框的关闭callback对话框关闭时的回调函数inputPlaceholder输入框的占位符仅用于 promptinputValue输入框的初始值仅用于 promptinputType输入框的类型仅用于 promptinputPattern输入框的校验正则表达式仅用于 promptinputValidator输入框的校验函数仅用于 promptinputErrorMessage输入框校验失败时的错误提示仅用于 prompt
2. Demo
对应的Demo示例
ElMessageBox.prompt
import { ElMessageBox } from element-plusconst showPrompt () {ElMessageBox.prompt(请输入你的名字,输入框,{confirmButtonText: 确定,cancelButtonText: 取消,inputPlaceholder: 名字,showClose: false,closeOnClickModal: false,closeOnPressEscape: false,}).then(({ value }) {console.log(输入的名字:, value)}).catch(() {console.log(已取消)})
}ElMessageBox.alert
import { ElMessageBox } from element-plusconst showAlert () {ElMessageBox.alert(操作成功,提示,{confirmButtonText: 确定,type: success,showClose: false,closeOnClickModal: false,closeOnPressEscape: false,}).then(() {console.log(已确认)})
}ElMessageBox.confirm
import { ElMessageBox } from element-plusconst showConfirm () {ElMessageBox.confirm(是否确认删除此项,删除确认,{confirmButtonText: 确认,cancelButtonText: 取消,type: warning,showClose: false,closeOnClickModal: false,closeOnPressEscape: false,beforeClose: (action, instance, done) {if (action confirm) {// 执行一些操作done()} else {done()}}}).then(() {console.log(已确认)}).catch(() {console.log(已取消)})
}如果需要自定义的样式可通过如下
ElMessageBox.confirm(内容,标题,{customClass: my-custom-class,confirmButtonText: 确认,cancelButtonText: 取消,}
)css如下
.my-custom-class .el-message-box__btns {justify-content: center;
}
.my-custom-class .el-button--primary {width: 100%;margin: 0;
}3. 实战
const handleLogin async (params) {loginLoading.value truetry {await getTenantId()const data await validForm()if (!data) {return}loginData.loginForm.captchaVerification params.captchaVerificationconst res await LoginApi.login(loginData.loginForm)if (!res) {return}loading.value ElLoading.service({lock: true,text: 正在加载系统中...,background: rgba(0, 0, 0, 0.7)})if (loginData.loginForm.rememberMe) {authUtil.setLoginForm(loginData.loginForm)} else {authUtil.removeLoginForm()}authUtil.setToken(res)if (!redirect.value) {redirect.value /}// 判断是否为SSO登录if (redirect.value.indexOf(sso) ! -1) {window.location.href window.location.href.replace(/login?redirect, )} else {push({ path: redirect.value || permissionStore.addRouters[0].path })}} finally {loginLoading.value falseloading.value.close()// 登录成功后显示弹窗提示await ElMessageBox.confirm(divp尊敬的客户brbr您好xxxx前认真阅读以下须知brbr1xxxxxxbrbrinput typecheckbox idagree-checkbox / label foragree-checkbox我已认真阅读并知悉以上须知/label/p/div,xxx须知, {confirmButtonText: 同意,showClose: false, // 禁止关闭showCancelButton: false, // 隐藏右上角的关闭按钮closeOnClickModal: false, // 禁止点击遮罩层关闭closeOnPressEscape: false, // 禁止按下 Esc 键关闭dangerouslyUseHTMLString: true,customClass: full-width-button, // 添加自定义类名beforeClose: (action, instance, done) {if (action confirm !document.getElementById(agree-checkbox).checked) {instance.confirmButtonLoading falsereturn ElMessageBox.alert(请勾选“我已认真阅读并知悉以上须知”以继续, 提示, {confirmButtonText: 确定,type: warning})}done()}});}
}// 添加样式以使按钮占据整个宽度
const style document.createElement(style);
style.type text/css;
style.innerHTML .el-message-box.full-width-button .el-message-box__btns {display: flex;justify-content: center;}.el-message-box.full-width-button .el-button--primary {width: 100%;margin: 0;}
;
document.head.appendChild(style);总体截图如下 下半部分的截图如下 4. 模版
针对上述应用的需求可以附实战的Demo
import { ElMessage, ElMessageBox, ElNotification } from element-plus
import { useI18n } from ./useI18n
export const useMessage () {const { t } useI18n()return {// 消息提示info(content: string) {ElMessage.info(content)},// 错误消息error(content: string) {ElMessage.error(content)},// 成功消息success(content: string) {ElMessage.success(content)},// 警告消息warning(content: string) {ElMessage.warning(content)},// 弹出提示alert(content: string) {ElMessageBox.alert(content, t(common.confirmTitle))},// 错误提示alertError(content: string) {ElMessageBox.alert(content, t(common.confirmTitle), { type: error })},// 成功提示alertSuccess(content: string) {ElMessageBox.alert(content, t(common.confirmTitle), { type: success })},// 警告提示alertWarning(content: string) {ElMessageBox.alert(content, t(common.confirmTitle), { type: warning })},// 通知提示notify(content: string) {ElNotification.info(content)},// 错误通知notifyError(content: string) {ElNotification.error(content)},// 成功通知notifySuccess(content: string) {ElNotification.success(content)},// 警告通知notifyWarning(content: string) {ElNotification.warning(content)},// 确认窗体confirm(content: string, tip?: string) {return ElMessageBox.confirm(content, tip ? tip : t(common.confirmTitle), {confirmButtonText: t(common.ok),cancelButtonText: t(common.cancel),type: warning})},// 删除窗体delConfirm(content?: string, tip?: string) {return ElMessageBox.confirm(content ? content : t(common.delMessage),tip ? tip : t(common.confirmTitle),{confirmButtonText: t(common.ok),cancelButtonText: t(common.cancel),type: warning})},// 导出窗体exportConfirm(content?: string, tip?: string) {return ElMessageBox.confirm(content ? content : t(common.exportMessage),tip ? tip : t(common.confirmTitle),{confirmButtonText: t(common.ok),cancelButtonText: t(common.cancel),type: warning})},// 提交内容prompt(content: string, tip: string) {return ElMessageBox.prompt(content, tip, {confirmButtonText: t(common.ok),cancelButtonText: t(common.cancel),type: warning})}}
}
