zoukankan      html  css  js  c++  java
  • 三、开发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;
          }


  • 相关阅读:
    IDEA创建WEB项目部署详细步骤
    Java计算两个日期相差的天数
    使用Callable和Future创建线程
    Java使用POI导出Excel表格
    关于Intellij IDEA的使用小技巧
    python描述符
    登录百度下载博客
    WINDOWS下Mysql的安装
    迭代器就是重复地做一些事情,可以简单的理解为循环,在python中实现了__iter__方法的对象是可迭代的,实现了next()方法的对象是迭代器,这样说起来有
    Python札记 -- 装饰器
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15795637.html
Copyright © 2011-2022 走看看