这次给大家带来如何使用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代码
<template>
<p class="alerthonor" v-if="showalerthonor">
<p class="alerthonorbox" @click="alerthonorclick"></p>
<p class="honorwindow">
<p class="honorclose" @click="honorclose"></p>
<p class="honorbg">
<p class="honorshare">
<p class="honorbgleft">升级通知</p>
<p class="honorbgright" @click='handleactions("share")'>分享</p>
</p>
<p class="honortext">{{title}}</p>
</p>
<p class="honorranking">
{{ranking}}
</p>
</p>
</p>
</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实现点击时间获取时间段查询
如何使用vue弹窗消息组件
以上就是如何使用vue.extend实现alert模态框弹窗组件的详细内容。