详细分析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('取消')
})

对于上述基本参数

参数描述
title对话框的标题
message对话框的消息内容,可以是字符串或 HTML
type消息类型,如 success, info, warning, error
iconClass自定义图标的类名
customClass对话框自定义类名
showClose是否显示右上角关闭按钮,默认为 true
closeOnClickModal是否可以通过点击遮罩层关闭对话框,默认为 true
closeOnPressEscape是否可以通过按下 Esc 键关闭对话框,默认为 true
showCancelButton是否显示取消按钮,默认为 false
cancelButtonText取消按钮的文本内容
confirmButtonText确认按钮的文本内容
cancelButtonClass自定义取消按钮的类名
confirmButtonClass自定义确认按钮的类名
beforeClose关闭前的回调函数,可以用于阻止对话框的关闭
callback对话框关闭时的回调函数
inputPlaceholder输入框的占位符(仅用于 prompt)
inputValue输入框的初始值(仅用于 prompt)
inputType输入框的类型(仅用于 prompt)
inputPattern输入框的校验正则表达式(仅用于 prompt)
inputValidator输入框的校验函数(仅用于 prompt)
inputErrorMessage输入框校验失败时的错误提示(仅用于 prompt)

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 = true
  try {
    await getTenantId()
    const data = await validForm()
    if (!data) {
      return
    }
    loginData.loginForm.captchaVerification = params.captchaVerification
    const 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 = false
    loading.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 = false
            return 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'
      })
    }
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农研究僧

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值