6、用vue2.0extend寫alert模態框彈窗組件

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