vue.extend를 사용하여 경고 모달 상자 팝업 창을 구현하는 단계에 대한 자세한 설명

이번에는 vue.extend로 경고 모달 상자 팝업 창을 구현하는 단계에 대해 자세히 설명하겠습니다. 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('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();
    }
  };
}

alert.vue code

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

참조 페이지 코드

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 도서:

Vue에서 PopupWindow 구성 요소를 사용하는 단계 분석

Vue 팝업 창 구성 요소를 사용하는 단계에 대한 자세한 설명

위 내용은 vue.extend를 사용하여 경고 모달 상자 팝업 창을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!