vue3 对消息提示框Message，MessageBox等进行二次封装

vue3 对消息提示框Message，MessageBox等进行二次封装

通常根据业务场景，可能需要进行二次封装方便灵活使用

// utils/msg.ts文件
import { ElNotification, ElMessage,ElMessageBox } from 'element-plus'


// 普通信息提示
export function infoMsg(msgInfo){
  ElMessage({
    type: 'info',
    showClose: true,
    dangerouslyUseHTMLString: true,
    message: msgInfo,
  })
}

// 成功提示
export function succesMsg(msgInfo){
  ElMessage({
    type: 'success',
    showClose: true,
    dangerouslyUseHTMLString: true,
    message: msgInfo,
  })
}

// 错误提示
export function errorMsg(msgInfo){
  ElMessage({
    type: 'error',
    showClose: true,
    dangerouslyUseHTMLString: true,
    message: msgInfo,
  })
}

// 警告提示
export function warnMsg(msgInfo){
  ElMessage({
    type: 'warning',
    showClose: true,
    dangerouslyUseHTMLString: true,
    message: msgInfo,
  })
}

// 带一个确定按钮或是按钮的alertBox
export function alertBox(msg,btnName,type) {
  let confirmName = btnName == '确定'? '确定' : '是'
  return ElMessageBox.alert(msg, '提示',{
    type: type,
    confirmButtonText: confirmName,
    dangerouslyUseHTMLString: true
  });

// 带确定取消按钮或者是否按钮的弹出提示框
export function confirmBox(msg,btnName,type) {
  let confirmName = btnName == '确定'? '确定' : '是'
  let cancelsName = btnName == '确定'? '取消' : '否'
  return ElMessageBox.confirm(msg,'提示', {
    type: type,
    confirmButtonText: confirmName,
    cancelButtonText: cancelsName,
    closeOnClickModal: false,
    closeOnPressEscape: false,
    dangerouslyUseHTMLString: true
  })
}

用法调用例子：

// 引入
import {infoMsg, succesMsg, errorMsg, warnMsg, alertBox, confirmBox} from '@/utils/msg.ts'
// 使用  传对应的参数
confirmBox('确认删除该标签吗？','确定',null).then(res => {
    console.log("确定：", res)
}).catch(res => {
    console.log("取消关闭：", res)
})

完结~