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

2021-11-17 10:30:54 阅读：207 来源： 互联网

标签：toast index vue showToast extend registryToast 组件

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("测试弹框");

思路总结：

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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