道一声清晨的祝福早上好！说一声清晨的关心吃早餐了吗？问一声清晨的关怀昨晚睡的好吗？真心送一句清晨的祝福愿你一天情绪愉快！
本文通过Vue.extend创建组件构造器的方法写弹窗组件，供大家参考，具体内容如下
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('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代码
<template>
<div class="alertHonor" v-if="showAlertHonor">
<div class="alertHonorBox" @click="alertHonorClick"></div>
<div class="honorWindow">
<div class="honorClose" @click="honorClose"></div>
<div class="honorBg">
<div class="honorShare">
<div class="honorBgLeft">升级通知</div>
<div class="honorBgRight" @click='handleActions("share")'>分享</div>
</div>
<div class="honorText">{{title}}</div>
</div>
<div class="honorRanking">
{{ranking}}
</div>
</div>
</div>
</template>
<script>
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);
}
}
}
</script>
引用页面代码
<script>
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('分享');
},
}
}
</script>
到此这篇关于vue.extend如何实现alert模态框弹窗组件就介绍到这了。行动才能送你到达你想要的彼岸，好好加油吧，时间如白驹过隙。更多相关vue.extend如何实现alert模态框弹窗组件内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
