vue注册全局组件

vue注册全局组件 (Vue.component)

step1: 自定义弹窗组件

<template>
  <transition name="fade"
              v-if="true">
    <div class="dialog-page">
      <div class="dialog-box">
        <h3 class="title">{
  { title }}</h3>
        <span class="close"
              @click="close">X</span>
        <button type="primary"
                class="confirm-btn"
                @click="confirm">确定</button>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({})
export default class Dialog extends Vue {
  @Prop()
  title!: string;

  isShow = false;

  mounted() {
    window.addEventListener('keyup', this.close);  // 任意按键隐藏弹窗
    this.isShow = true;
  }

  close() {
    // this.isShow = false;
    this.$nextTick(() => {
      this.$emit('close');   // 触发父组件的close方法,即Dialog绑定的close方法
    });
  }

  confirm() {
    this.$emit('confirm');  // 触发父组件的confirm方法,即Dialog绑定的confirm方法
  }
}
</script>

<style lang="scss" scoped>
.dialog-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;

  .dialog-box {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 700px;
    height: 400px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 6px 0 #fff;

    .title {
      text-align: center;
      font-size: 22px;
      color: #333;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
    }

    .confirm-btn {
      width: 80%;
      position: absolute;
      left: 10%;
      bottom: 50px;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

step2: 定义函数控制组件的展示与消失

import Vue from "vue";
import Dialog from "@/components/Dialog/Dialog.vue";  // 导入自定义组件

let vm: