Element UI中MessageBox标准用法

第一步：在main.js文件中导入

import { MessageBox } from 'element-ui'

Vue.prototype.$confirm = MessageBox.confirm

第二步：页面中使用

页面：

对应的方法：

async showDeleteUserDialog (userId) { //删除用户
  const confirmRes = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).catch(err => err) //用catch来捕获错误消息
  
  //用户单击确认，返回值为字符串confirm; 单击取消，返回值为字符串cancel
  if ('cancel' === confirmRes) {//用户点击了取消
    return this.$message.info('已经取消了删除')
  }
  if ('confirm' === confirmRes) { //用户点击了确认
    const { data: res } = await this.$axios.delete(`/user/deleteUserById/${userId}`)
    console.log(res)
    if (res.code !== 200) {
      return this.$message.error(res.msg)
    }
    this.$message.success(res.msg)
    //刷新用户列表
    this.page(this.queryInfo)
  }
}