关于ElementUI中confirm确认弹窗的封装整理

封装的ElementUI中confirm确认弹窗，开箱即用i👊

关于确认弹窗，项目开发中使用频率比较高，相对于ElementUI的写法个人觉得有点繁琐，同样的代码要写好多遍，所以对其代码进行了封装整理（如下）

import { MessageBox, Message } from 'element-ui'

const confirm = (text) => {
  return new Promise((resolve, reject) => {
    MessageBox.confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      resolve(true)
    }).catch(() => {
      Message.info('已取消')
      reject(false)
    })
  }).catch(() => {
    // 可对错误进行处理
  })
}

export default confirm

• 如何使用呢？

直接引入调用即可，不过要注意这个方法是异步的，所以要处理好异步交互

比如在vue组件中使用

import confirm from '@/utils/confirm'      // 引入
...
methods: {
      async toggleStarClick(data) {
            const res = await confirm('确认要取消星标吗？')
            if (res) {
                  ...
            }
      }
      // 或者
      toggleStarClick(data) {
            confirm('确认要取消星标吗？').then(res => {
                  if(res) {
                        ...
                  }
            })
      }
}