@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({
http://www.haoziyuan.ccimgUrl:require('../../../static/images/shadow.png'),//顶部图片
title:'我是标题',
content:'我是内容',
btnText:'我是按钮',
click:()=>{
//点击按钮事件
this.$router.push('……')
}
})
}
}
方便以后自己使用，大家也可以参考哦，也希望大家多多支持毛票票，谢谢~~
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。