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

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

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

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