Element-UI的MessageBox弹窗使用详解(这里讲解的是基于vue2的element-ui 2.15.5版本)

1.像是如下图所示的弹窗消息可以点击取消和确定的我们应该怎么引入到自己的项目中去呢？2. 首先我们是在一个vue2/@vue-cli4搭建的项目中，在element.js中按需引入组件。然后将$confirm方法注册为全局可用的import Vue from 'vue'import { MessageBox } from 'element-ui'Vue.prototype.$confirm = M

Init_Vieeee

5752人浏览 · 2021-08-29 16:20:49

Init_Vieeee · 2021-08-29 16:20:49 发布

1.像是如下图所示的弹窗消息可以点击取消和确定的我们应该怎么引入到自己的项目中去呢？

2. 首先我们是在一个vue2/@vue-cli4搭建的项目中，在 element.js中按需引入组件。然后将$confirm方法注册为全局可用的

import Vue from 'vue'
import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm

3.然后回到我们.vue的文件中此时$confirm已经是全局可用的方法，它的用法如下

async removeUser(id) {
      const resultConfirm = await this.$confirm('此操作将永久删除该用户, 是否继续?', '永久删除用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 如果点击的是 确定则resultConfirm 返回的是confirm
      // 否则点击其他的都是返回cancel
      console.log(resultConfirm)
      if (resultConfirm !== 'confirm') return this.$message.info('已经取消删除')
      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error('删除用户失败')
      this.getUserList()
      return this.$message.success('删除用户成功')
    }

4.这里利用了 async await ES7的语法新特性可以将返回promise 简化得到我们可以操作的值.catch方法是一定要加的如果不加在你没有点击报错的时候会报错，这里用一个常量接收$confirm返回的值当用户点击确定那么它返回的就是 confirm 否则就是返回cancel,这样我们就可以做后续的处理了

5.两行注释以下的内容是我的项目中的函数处理大家可以不用理解