好资源导航 » 文章资讯 » Vue自定义全局弹窗组件操作

Vue自定义全局弹窗组件操作

2023-07-18 23:24:04 418

写在前面

页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了

效果图

弹窗组件

新建一个弹窗的组件——popup.vue






@import"../../../assets/css/minx/minx";
@import"../../../assets/css/pixel/pixel";
//渐变过渡
.fade-enter,
.fade-leave-active{
opacity:0;
}
.fade-enter-active,
.fade-leave-active{
transition:opacity.35s;
}
//全局弹窗
.mask{
.fixed;
z-index:10;
background:rgba(0,0,0,0.65);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:75/75rem;
.window{
height:400/75rem;
width:100%;
background:#fff;
border-radius:8px;
text-align:center;
.shadow{
width:270/75rem;
margin-top:-90/75rem;
}
h1{
margin-top:32/75rem;
font-size:32/75rem;
color:#f1300b;
line-height:32/75rem;
font-weight:600;
}
p{
margin-top:32/75rem;
font-size:28/75rem;
color:#222222;
line-height:40/75rem;
}
button{
margin-top:34/75rem;
background:#f95644;
border-radius:10px;
width:23/75remx;
height:64/75rem;
font-size:28/75rem;
color:#ffffff;
}
}
.close{
width:60/75rem;
height:60/75rem;
margin-top:40/75rem;
}
}

popup.js文件

新建一个popup.js文件，写方法

importVuefrom'vue'
importPopupfrom'./popup.vue'
constPopupBox=Vue.extend(Popup)

Popup.install=function(data){
letinstance=newPopupBox({
data
}).$mount()

document.body.appendChild(instance.$el)

Vue.nextTick(()=>{
instance.show=true
//show和弹窗组件里的show对应，用于控制显隐
})
}
exportdefaultPopup

main.js引入popup.js

//自定义全局弹窗组件
importVuefrom'vue'
importPopupfrom'./components/dialog/popup'
Vue.prototype.$popup=Popup.install

组件中使用方法

methods:{
btnClick(){
this.$popup({
https://www.haoziyuan.ccimgUrl:require('../../../static/images/shadow.png'),//顶部图片
title:'我是标题',
content:'我是内容',
btnText:'我是按钮',
click:()=>{
//点击按钮事件
this.$router.push('……')
}
})
}
}

方便以后自己使用，大家也可以参考哦，也希望大家多多支持毛票票，谢谢~~

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue自定义全局弹窗组件操作

{{title}}

随机推荐

Vue自定义全局弹窗组件操作

{{title}}

热门推荐

随机推荐