详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）

前言

由于需要在登录时，附上一些用户说明书的弹窗
对于ElMessageBox的基本知识详细了解
可通过官网了解基本的语法知识ElMessageBox官网基本知识

1. 基本知识

Element Plus 是一个基于 Vue 3 的组件库，其中包括各种类型的弹窗组件，用于在网页上显示信息或与用户进行交互

主要的弹窗组件包括 ElMessageBox.alert、ElMessageBox.prompt 和 ElMessageBox.confirm 等

• ElMessageBox.prompt
  用于显示带有输入框的对话框
  用于需要用户输入信息的场景

import { ElMessageBox } from 'element-plus'ElMessageBox.prompt('请输入你的邮箱','提示',{confirmButtonText: '确定',cancelButtonText: '取消',}
).then(({ value }) => {console.log('用户输入的邮箱:', value)
}).catch(() => {console.log('取消输入')
})

• ElMessageBox.alert
  用于显示带有确认按钮的对话框
  用于告知用户某些信息

import { ElMessageBox } from 'element-plus'ElMessageBox.alert('这是一段内容','标题',{confirmButtonText: '确定',callback: action => {console.log(action)}}
)

• ElMessageBox.confirm
  用于显示带有确认和取消按钮的对话框
  用于需要用户确认或取消某些操作的场景

import { ElMessageBox } from 'element-plus'ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
).then(() => {console.log('确认')
}).catch(() => {console.log('取消')
})

对于上述基本参数

2. Demo

对应的Demo示例：

• ElMessageBox.prompt

import { ElMessageBox } from 'element-plus'const 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-plus'const showAlert = () => {ElMessageBox.alert('操作成功','提示',{confirmButtonText: '确定',type: 'success',showClose: false,closeOnClickModal: false,closeOnPressEscape: false,}).then(() => {console.log('已确认')})
}

• ElMessageBox.confirm

import { ElMessageBox } from 'element-plus'const 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(`<div><p>尊敬的客户：<br><br>您好！xxxx前认真阅读以下须知：<br><br>1xxxxxx<br><br><input type="checkbox" id="agree-checkbox" /> <label for="agree-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'})}}
}