vue的toast、dialog（cube-ui）弹窗组件总结

最新推荐文章于 2024-08-07 21:53:27 发布

宝儿的程序生涯

最新推荐文章于 2024-08-07 21:53:27 发布

阅读量4.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/fengtingYan/article/details/88820714

版权

本文总结了在Vue项目中使用cube-ui的toast和dialog弹窗组件时遇到的问题及解决方法，包括全局与局部调用的区别，以及在axios中使用时this指向的解析。通过学习和实践，作者理解了this的正确用法，避免了在axios内部调用组件时的错误。

摘要由CSDN通过智能技术生成

在这里插入图片描述
index.js

import vue from 'vue'

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

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

// 定义弹出组件的函数 两个参数 显示文本和显示时间
function showToast(text, showtime = 3000) {
   
    const toastDom = new ToastConstructor({
   
        el: document.createElement('div'),
        data() {
   
            return {
   
                text: text,
                showWrap: true, // 是否显示组件
                showContent: true // 作用:在隐藏组件之前,显示隐藏动画
            }
        }
    })

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

    // 隐藏
    setTimeout(() => {
   
        toastDom.showContent = false
    }, showtime - 1250)
    // 过了 showtime 时间后隐藏整个组件
    setTimeout(() => {
   
        toastDom.showWrap = false
    }, showtime)
}

// 注册为全局组件的函数
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$toast()

// function registryToast() {
   
//     vue.prototype.$toast = showToast
// }

// 将注册在vue原型链改为调用showToast
const registryToast = {
   
    showToast: showToast
}

export default registryToast

toast.vue

<template>
  <div id="toast" class="toast" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{
   {
   text}}</div>
</template>

<style scoped>
.toast {
   
  position: fixed;