---

title: 12.《关于ElementUI中confirm确认弹窗的封装整理》
date: 2021-03-07 14:39:14

---

封装的ElementUI中confirm确认弹窗

在实际项目开发中，我们删除某一项时，都会有一个弹框让您进行确认操作，这样你会写无数个弹框，非常麻烦，所以，为了方便，个人对弹框进行了封装，希望大家能有所成长

1.将封装的代码挂在到原型对象上，任何地方通过 this 可以访问，element.js 最终要在 main.js中导入,如果你在原型对象上进行了挂在，就不用导入了

element.js

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

2.在相应的vue组件进行使用

 <el-table-column label="操作" width="400">
              <span class="opan" @click="$router.push('/specAction/specDetalis')">查看详情</span>
              <span class="opan">编辑</span>
              <span class="opan">更新</span>
              <span class="opan" @click="del">删除</span> 
  </el-table-column>
  
 methods: {
     // 删除
     async  del(){ 
          const res = await this.$confirm('确认要删除吗？')
           if(res){
             this.$success("你确认惹删除！")
           }
       },
 }