三、开发alert、confirm插件

alert和confirm弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作。
其实alert和confirm可以合并成一个插件使用,只需要配置一下参数即可。

1、src》components》创建文件夹my-confirm》创建文件comfirm.vue》
   完成组件的静态页面设计
2、src》App.vue》
   (1)在模板中设置一个click事件
   (2)在事件处理函数中,调用一个(后续在插件中自定义的)Vue实例的confirm方法,传入两个参数。
3、src》components》my-confirm》comfirm.vue》
   (1)在data数据对象中设置动态数据,
   (2)把模板中的数据变成动态数据。
   (3)添加click事件,设置事件处理函数。
   (4)把data数据对象中的数据初始化为空数据。
【npm run serve】
4、src》components》my-confirm》创建文件index.js》
   (1)导入组件。 import MyConfirm from "./confirm"
   (2)导出默认的方法。extend default{ install(Vue){...}}
   (3)Vue.extend继承组件。let VueComp = Vue.extend(MyConfirm);
   (4)用函数function(){},在Vue的原型链上定义一个方法,Vue.prototype.$confirm=function(msg,arr){...}
   (5)给函数传递参数。function(msg,arr)
   (6)在函数中,手动创建标签来挂载到new VueComp()实例上。let vm=new VueComp().$mount(document.createElement("div"));
   (7)把new VueComp()实例中的$el节点追加到页面上。document.body.appendChild(vm.$el);
5、src》components》my-confirm》comfirm.vue》
   (1)在data数据对象中设置动态数据,
   (2)把模板中的数据变成动态数据。
   (3)添加click事件,设置事件处理函数。
   (4)把data数据对象中的数据初始化为空数据。
6、src》components》my-confirm》index.js》
   (8)把参数一一赋值给new VueComp()实例中对应的属性。
      vm.message=msg;
      if(arr&&arr.length>0){
         vm.btns=arr;
      }


原文地址:https://www.cnblogs.com/Strugglinggirl/p/15795637.html