vue.extend() 动态创建组件

toast.js

import Toast from "./toast.vue";
import Vue from 'vue';

const ToastConstructor = Vue.extend(Toast);

function showToast(text, duration=2000) {
    const toastDOM = new ToastConstructor({
        el: document.createElement('div'),
        data() {
            return {
                text: text,
                show: true
            }
        }
    });
    document.body.appendChild(toastDOM.$el);
    setTimeout(() => {
        toastDOM.show = false;
    }, duration)
}

function toastRegistry() {
    Vue.prototype.$toast = showToast
}

export default toastRegistry;

toast.vue

App.vue

打开弹框

methods: {
   showToast() {
        this.$toast("弹框")
    }
}

效果： 显示弹框2秒后消失。