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

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();    }  };}

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