vue基于element 封装一个自己的组件

在components里面新建一个js

import Vue from 'vue'
//确定窗
Vue.prototype.$JcMsgBox = function alert(msg = '确认要删除该数据？' ,type = 'success', title = '系统提示', settings = {}) {
  Object.assign(settings, {  //合并对象
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type:type,
    dangerouslyUseHTMLString: true //允许确认框内容为html格式
  })
  return this.$confirm(`<p style="font-weight:bold;">${msg}</p>`, title, settings)
}

在main.js里面引入实例

import './components/global/JcMsgBox'

使用的时候直接在页面调用

this.$JcMsgBox('提示语句','类型图标','弹窗标题')
 .then(res => {
console.log('点击确定执行的方法')
 })
 .catch(errMsg => {
          this.$alert(errMsg, { type: 'error' })
 })