vue.extend实现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>



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。