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

前端之家收集整理的这篇文章主要介绍了vue.extend实现alert模态框弹窗组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文通过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代码

<div class="jb51code">
<pre class="brush:xhtml;">

引用页面代码

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(){ //点击<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>
    alert('<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>');
  },}

}

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

猜你在找的Vue相关文章