vue.extend implémente le composant contextuel de boîte modale d'alerte

Cet article présente principalement en détail le composant contextuel de boîte modale d'alerte implémenté par vue.extend, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article utilise Vue.extend La méthode de. créer un constructeur de composant consiste à écrire un composant contextuel pour votre référence. Le contenu spécifique est le suivant

code du fichier 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('p')});
  alertComponent.title = options.title;
  alertComponent.ranking = options.ranking;
  // 把alertHonor.vue加入body中
  alertComponent.$appendTo(document.body);

  // 回调函数
  alertComponent.callback = function(action) {
    if (action == 'share') {
      options.share();
    }
  };

}

code alert.vue

<template>
  <p class="alertHonor" v-if="showAlertHonor">
    <p class="alertHonorBox" @click="alertHonorClick"></p>
    <p class="honorWindow">
      <p class="honorClose" @click="honorClose"></p>
      <p class="honorBg">
        <p class="honorShare">
          <p class="honorBgLeft">升级通知</p>
          <p class="honorBgRight" @click=&#39;handleActions("share")&#39;>分享</p>
        </p>
        <p class="honorText">{{title}}</p>
      </p>
      <p class="honorRanking">
        {{ranking}}
      </p>
    </p>
  </p>
</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>

Code de la page de citation

<script>
  import AlertHonor from &#39;../alert.js&#39;
  export default{
    data(){
      return{
        title:&#39;我的荣誉&#39;
      }
    },
    ready(){
    },
    methods:{
      back(){
        alert(1)
      },
      submit(){
        var vm = this;
        AlertHonor({
          
          title:&#39;拜访达人&#39;,
          ranking:&#39;您在全国排名第99&#39;,
          share: function(){
            vm.share();
          }
        });
      },
      share(){ //点击分享
        alert(&#39;分享&#39;);
      },
    }
  }
</script>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois. !

Recommandations associées :

Analyse sur la façon dont vue introduit les variables globales sass

Utilisez vue-router pour compléter une fonction de navigation simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!