vue写一个toast弹窗公共组件思路 vue.extend

vue官网vue.extend介绍：

 封装使用案例：

src/components/toast/index.vue

<template>
  <div v-if="showWrap">{{text}}</div>
</template>
<!--前端样式忽略-->
<!--前端js逻辑忽略-->

src/components/toast/index.js

import vue from 'vue'

//静态组件
import toastComponent from './index.vue'

// 返回一个扩展实力构造器
const ToastConstructor = vue.extend(toastComponent)

// 定义弹出组件的函数 两个参数 显示文本和显示时间
function showToast(text, showtime = 3000) {
    const toastDom = new ToastConstructor({
        el: document.createElement('view'),
        data() {
            return {
                text: text,
                showShade: true    // 是否显示组件
            }
        }
    })

    // 把实例化的toast.vue 添加到body中
    document.body.appendChild(toastDom.$el)

    //隐藏
    setTimeout(() => {
        toastDom.showShade = false;
    }, showtime)
}


const registryToast = {
  showToast: showToast
}

export default registryToast

main.js

// 全局引入Toast
import registryToast from './components/toast/index.js';
Vue.prototype.$toast = registryToast.showToast;

在其他方法中引用，例如公共请求方法中：

import registryToast from './components/toast/index.js'

function Toast(message) {
  registryToast.showToast(message)
}

//之后使用Toast()调用
Toast("测试弹框");

思路总结：

1. vue.extend 函数可以生成一个 组件构造器 可以用这个函数构造出一个 vue组件实例
2. 可以用 document.body.appendChild() 动态的把组件加到 body里面去
3. 可以用vue.prototype.$toast = showToast 可以在全局注册组件

标签：toast,index,vue,showToast,extend,registryToast,组件
来源： https://blog.csdn.net/xiasohuai/article/details/121371850