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;
          }


  • 相关阅读:
    wxPython
    IT从业者职业规划
    成功开发iPhone软件的10个步骤
    开源认识:Jumony
    一个GG/MM的彩色验证码图片(C#)
    IT从业者学习规划
    为某一个对象动态添加属性
    .net 动态加载css与js
    文本框等css
    博客园配合得很好的代码插件
  • 原文地址:https://www.cnblogs.com/Strugglinggirl/p/15795637.html
Copyright © 2011-2022 走看看