本文通過Vue.extend創(chuàng)建組件構(gòu)造器的方法寫彈窗組件，供大家參考，具體內(nèi)容如下

alert.js文件代碼

import Vue from 'vue'// 創(chuàng)建組件構(gòu)造器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;  // 把a(bǔ)lertHonor.vue加入body中  alertComponent.$appendTo(document.body);  // 回調(diào)函數(shù)  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},  //達(dá)人昵稱      ranking:{type:String},   //排名      share:{type:Function}, //分享    },    data(){      return{        showAlertHonor:true      }    },    methods:{      alertHonorClick(){ //點擊其他區(qū)域        this.showAlertHonor = false; //關(guān)閉整個窗口      },      honorClose(){ //點擊關(guān)閉圖標(biāo)        this.showAlertHonor = false;      },      handleActions(action){        this.callback(action);      }    }  }</script>

 引用頁面代碼

<script>  import AlertHonor from '../alert.js'  export default{    data(){      return{        title:'我的榮譽(yù)'      }    },    ready(){    },    methods:{      back(){        alert(1)      },      submit(){        var vm = this;        AlertHonor({                    title:'拜訪達(dá)人',          ranking:'您在全國排名第99',          share: function(){            vm.share();          }        });      },      share(){ //點擊分享        alert('分享');      },    }  }</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。