三、开发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;

      }