vue弹出alert_如何使用vue.extend实现alert模态框弹窗组件

这次给大家带来如何使用vue.extend实现alert模态框弹窗组件，使用vue.extend实现alert模态框弹窗组件的注意事项有哪些，下面就是实战案例，一起来看一下。

alert.js文件代码import Vue from 'vue'

// 创建组件构造器

const alertHonor = Vue.extend(require('./alert.vue'));

var currentMsg = {callback:function(){

}}

export default function(options){

var alertComponent = new alertHonor({el: document.createElement('p')});

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代码

升级通知

分享

{{title}}

{{ranking}}

export default{

props:{

img:{type:String}, //图片

title:{type:String}, //达人昵称

ranking:{type:String}, //排名

share:{type:Function}, //分享

},

data(){

return{

showAlertHonor:true

}

},

methods:{

alertHonorClick(){ //点击其他区域

this.showAlertHonor = false; //关闭整个窗口

},

honorClose(){ //点击关闭图标

this.showAlertHonor = false;

},

handleActions(action){

this.callback(action);

}

}

}

引用页面代码

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('分享');

},

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：