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>