本文介绍了一个简单的Vue弹窗组件的实现，并详细讲述了如何将其封装为一个全局使用的Vue插件，包括插件的单例模式、属性配置和事件监听。通过在main.js中注册插件，使得在Vue应用中调用弹窗变得十分便捷。
vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗
popup.vue
{
{text}}
组件html结构, 外层divposition:fixed定位, 内层div显示弹窗内容
export default {
name: 'popup',
props: {
text: { //文字内容
type: String,
default: ''
},
time: { //显示的时长
type: Number,
default: 3e3
},
},
data(){
return {
visible: false
}
},
methods: {
open() {
this.visible = true
clearTimeout(this.timeout);
this.$emit('show')
if(this.time > 0){
this.timeout = setTimeout(() => {
this.hide()
}, this.time)
}
},
hide() {
this.visible = false<
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
