vue.extend实现alert模态框弹窗组件

发布时间：2020-12-17 02:18:57 所属栏目：百科来源：网络整理

导读：本文通过Vue.extend创建组件构造器的方法写弹窗组件，供大家参考，具体内容如下 alert.js文件代码 var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alertHonor({el: document.createElement('div')}

本文通过Vue.extend创建组件构造器的方法写弹窗组件，供大家参考，具体内容如下

alert.js文件代码

var currentMsg = {callback:function(){
}}

export default function(options){

var alertComponent = new alertHonor({el: document.createElement('div')});
alertComponent.title = options.title;
alertComponent.ranking = options.ranking;
// 把alertHonor.vue加入body中
alertComponent.$appendTo(document.body);

// 回调函数
alertComponent.callback = function(action) {
if (action == 'share') {
options.share();
}
};

}

alert.vue代码

引用页面代码

import AlertHonor from '../alert.js' export default{ data(){ return{ title:'我的荣誉' } },ready(){ },methods:{ back(){ alert(1) },submit(){ var vm = this; AlertHonor({

      title:'拜访达人',ranking:'您在全国排名第99',share: function(){
        vm.share();
      }
    });
  },share(){ //点击分享
    alert('分享');
  },}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!