Vue.extend 로 메시지 알림 구성 요 소 를 구축 하 는 방법 인 스 턴 스

전제 조건
얼마 전에 자신 이 만 든 vue 트 레이 너 프로젝트 는 일반적인 메시지 알림 구성 요소 가 필요 합 니 다.그러나 메시지 알림 이라는 구성 요 소 는 각 페이지 에 구성 요 소 를 추가 하 는 것 이 아니 라 방법 으로 호출 하고 싶 습 니 다.허름 한 메시지 알림 구성 요 소 를 직접 만 듭 니 다.
Vue.extend 가 뭐 예요?

공식 문서 에 따 르 면 그 는 하위 클래스 vue 를 만 들 고 구조 함 수 를 되 돌려 주 는 구조 기 입 니 다.Vue.ponent 의 작업 은 주어진 구조 함 수 를 문자열 ID 와 연결 시 켜 Vue.js 가 템 플 릿 에서 받 아들 일 수 있 도록 하 는 것 입 니 다.
이 점 을 알 게 된 후에 우 리 는 우리 의 메시지 알림 구성 요 소 를 시작 합 시다.
메시지 알림 구성 요소
우선 알림 구성 요소 의 템 플 릿 을 만 듭 니 다.

<template>
  <transition name="message-fade">
    <div class="message" v-show="show">
    <span class="icon"><icon name="info"></icon></span>
      <p>{{message}}</p>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'v-message',
    mounted(){
      this.StartTime();
    },
    data(){
      return {
        message: '123',
        show: false,
        timer: null
      }
    },
    methods:{
      StartTime(){
        this.show = true;
        if(this.timer){
          clearTimeOut(this.timer)
        }else{
          this.timer = setTimeout(()=>{
            this.show = false
          }, 3000);
        }
      }
    }
  }
</script>

그 다음 에 message.vue 를 Vue.extend()에 전달 해 야 합 니 다.

import Vue from 'vue';
let MessageBox = Vue.extend(require('./message.vue'));
let instance;
var message = function(options){
  if(typeof options === 'string'){
    options = {
      message: options
    }
  }
  //    
  instance = new MessageBox({
    data: options
  })
  //       dom   
  instance.vm = instance.$mount();
  //       ，           
  if(options.type){
    instance.vm.$el.children[0].className += ` icon__${options.type}`;
  }
  document.body.appendChild(instance.vm.$el);
  return instance.vm;
}

const type = ['success', 'info', 'warning', 'error'];
type.forEach((type)=>{
  message[type] = options =>{
    if(typeof options === 'string'){
      options = {
        message: options
      }
    }
    options.type = type;
    return message(options);
  }
})

export default message;

이후 전역 방법 에 걸 고 this.$message()방법 으로 호출 합 니 다.

vue.prototype.$message = message;

마지막 효과 도

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.