使用extend封装一个全局弹窗组件

概念

extend是一个组件构造器，传入包含组件选项的对象，返回一个Vue的子类，也就是组件

步骤

1.弹窗组件toast.vue

<template>
  <div>
    <div class="container" v-if="show">
      <span>{{ text }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Toast",
  data() {
    return {};
  },
};
</script>

2.toast.js文件

import Vue from 'vue'
import Toast from '../components/toast.vue'
const ToastConstructor = Vue.extend(Toast)
function showToast(text) {
  const toastDOM = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
        text: text,
        show: true
      }
    }
  })
  document.body.appendChild(toastDOM.$el)
  setTimeout(() => {
    toastDOM.show = false
  }, 2000)
}
function toastRegistry() {
  Vue.prototype.$toast = showToast
}
export default toastRegistry

3.main.js中引入

import toastRegistry from './commom/toast'
Vue.use(toastRegistry)

全局便可以通过this.$toast(’’")来使用组件