vue的toast、dialog(cube-ui)弹窗组件总结
就是这样在main.js写入// 注册自定义toast组件然后乍一看是没有问题的然而,当我把它放进this.axios里面看,他给我报错了于是我去请教了师傅,然后我是如何把它改对的呢?这里我改成了局部调用删掉main.js导入的内容在当前页面导入://任何地方使用registryToast.showToast(‘网络连接成功’)这样是可以打印出来的那么我到底错在哪里了?
就是这样
在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,数组,数组方法,二维数组,字符串
更多推荐
所有评论(0)