vue弹出框组件封装实例代码

//首先创建一个mack.vue


//写js


//css

import Vue from 'vue';
import confirm from './mack';
let cOnfirmConstructor= Vue.extend(confirm);
let theCOnfirm= function (text) {
  return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
   let cOnfirmDom= new confirmConstructor({  
    el: document.createElement('div')
   })
   document.body.appendChild(confirmDom.$el); //new一个对象，然后插入body里面
   confirmDom.text = Object.assing( confirmDom.text,text);  //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
   confirmDom.ok = function () {
    res()
    confirmDom.isShow = false
   }
   confirmDom.close = function () {
    rej()
    confirmDom.isShow = false
   }
  })
 }
 export default theConfirm; 
  //暴露出去，别忘记挂载到vue的原型上 
  //  => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
  //  => 再挂载 Vue.prototype.$cOnfirm= theConfirm;
  //在需要的地方直接用以下方法调用即可：
  //  this.$confirm({
  //   type:'提示',
  //   msg:'是否删除这条信息？',
  //   btn:{
  //     ok:'yes',
  //     no:'no'
  //   }
  // }).then(() => {
  //   console.log('ok')
  // })
  // .catch(() => {
  //   console.log('no')
  // })

import macksjs from './assets/mackjs'
Vue.prototype.$cOnfirm= macksjs ;

我是弹出框
 methods:{
  deleteaas() {
   this.$confirm({
    title: "addd",
    mesg: "您确定不再关注该客户吗？",
    cntMsg: '
你好
',
    cancelValStyle:{color:'red'},
    btn: {
     confirmVal: "确a定",
     cancelVal: "取a消"
    }
   })
    .then(() => {
     console.log("yes");
     //点击确定之后的处理
    })
    .catch(() => {
     console.log("no");
    });
  }
 }