element中有这样一个组件,消息确认弹窗
用法也非常简单,在方法中触发就可以:
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//点击确定按钮的操作
});
}).catch(() => {
//点击删除按钮的操作
});
第一个参数为确认框的内容,第二个参数为标题,第三个参数为配置项对象,最麻烦也是这个配置项对象,如果整个项目需要用到很多这种确认框,并且配置相同的话,就可以将其封装成一个方法,并直接挂载在Vue实例上:
Vue.prototype.$alertMsgBox = function alert(msg = '确认要删除该数据?', title = '提示', settings = {}) {
Object.assign(settings, { //合并对象
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true //允许确认框内容为html格式
})
return this.$confirm(`<p style="font-weight:bold;">${msg}</p>`, title, settings)
}
这里用到es6的参数默认值,如果不传参数,就按上面的参数默认值显示
使用:
this.$alertMsgBox('简书示例确认框', '简书示例')
.then(() => {})
.catch(() => {})
效果: