通過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>