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


  • 相关阅读:
    lamp一键安装
    mysql忘记密码
    lamp搭建
    进程与线程的一个简单解释
    使用jmeter进行api接口压力测试(转自某位大佬,感谢)
    cookie,session的区别
    Pycharm2019最新激活注册码(亲测有效)
    安装jmeter
    php环境搭建(需编译安装)
    (转载某位大神的,谢谢啦)listener.ora、tnsnames.ora和sqlnet.ora这3个文件的关系和作用
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15795637.html
Copyright © 2020-2023  润新知