vue使用element-ui简单封装一个消息确认框

element中有这样一个组件，消息确认弹窗

a1f26ba351aa80e6bdef75613a6abd4.png

用法也非常简单，在方法中触发就可以:

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(() => {})

效果:

1564049535(1).jpg