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("你确认惹删除!")
}
},
}
原文地址:https://blog.csdn.net/qq_44864082/article/details/114484288
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。