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

就是这样

在main.js写入

// 注册自定义toast组件

import registryToast from ‘./components/common/toast/index’

Vue.use(registryToast)

Vue.prototype.toast = registryToast.showToast

然后this.toast('111')

乍一看是没有问题的

然而,当我把它放进this.axios里面

看，他给我报错了

于是我去请教了师傅，

然后我是如何把它改对的呢？

这里我改成了局部调用

删掉main.js导入的内容

在当前页面导入：

import registryToast from ‘…/components/common/toast/index’

//任何地方使用

registryToast.showToast(‘网络连接成功’)

这样是可以打印出来的

那么我到底错在哪里了？

原来这里我对this的理解有错误，放进axios的this指代的就是this.axios了，他就不认识toast了，那么我就去学习一下this的用法

---

dialog

第一步同样是新建

//dialog.vue

@click=“showWrap= false , showContent = false”>

{{text}}

//index.js

import vue from ‘vue’

// 静态组件

import dialogComponent from ‘./dialog.vue’

// 返回一个扩展实力构造器

const DialogConstructor = vue.extend(dialogComponent)

let toastDom

// 定义弹出组件的函数 两个参数 显示文本和显示时间

function showDialog(text, icon = ‘success’, show = true) {

if (toastDom) {

if (toastDom.showWrap) {

return toastDom

}

}

toastDom = new DialogConstructor({

el: document.createElement(‘div’),

data() {

return {

text: text,

icon: icon,

showWrap: show, // 是否显示组件

showContent: show // 作用:在隐藏组件之前,显示隐藏动画

}

},

methods: {

show() {

this.showWrap = true

this.showContent = true

toastDom = this

},

hide() {

toastDom = this

this.showWrap = false

this.showContent = false

debugger

const node = document.querySelector(‘#dialog’)

if (node && node.parentNode) {

node.parentNode.removeChild(node)

}

}

}

})

// 把实例化的toast.vue 添加到body中

document.body.appendChild(toastDom.$el)

return toastDom

}

// 注册为全局组件的函数

// 将组件注册到 vue 的 原型链里去,

// 这样就可以在所有 vue 的实例里面使用 this.$toast()

// function registryToast() {

// vue.prototype.$toast = showToast

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

a1VVFx-1714375274648)]

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-DzvhFYkT-1714375274649)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串