随手写的一个小功能，直接就可以拿去用，能为你节省10多分钟
share()调用模态框
布局：
代码语言：javascript复制 <div class="footer" :class="[popup?'popyes':'popno']">
<p class="top">活动站点与您所选择的站点不同，确认报名吗？</p>
<div class="bot">
<p class="bot-lef" @click="cancel">取消</p>
<p class="bot-rig" @click="cancel">确认</p>
</div>
<image class="icon" mode="asperFill" src="/static/images/logo.png"></image>
</div>
<div class="shadow" :style="{display:popup?'block':'none'}"></div>参数：
代码语言：javascript复制return{
popup:false,
}方法：
代码语言：javascript复制share(){
this.popup = true;
console.log(this.popup);
},
cancel(){
console.log(this.popup)
this.popup = false;
}样式：
代码语言：javascript复制@keyframes UPyes{
from{top:0;opacity:0}
to{to:-4vh;opacity:1}
}
@keyframes UPno{
from{to:-4vh;opacity:1}
to{top:0;opacity:0}
}
.popyes{
animation:UPyes .1s forwards;
}
.popno{
animation:UPno .1s forwards;
}
.footer{
position:fixed;
z-index:9;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
padding:40px 24px;
width: 311px;
height: 200px;
background:#fff;
opacity:0;
border-radius: 4px;
font-size: 17px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height:40px;
text-align:center;
color: #000000;
letter-spacing: 1px;
.top{
font-size:14px;
}
.bot{
position:absolute;
left:0;
bottom:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px #aaa solid;
p{
width:49%;
font-size:16px;
}
.bot-lef{
border-right:1px #aaa solid;
}
.bot-rig{
color:#5566ff;
}
}
.icon{
position:absolute;
top:-20px;left:0;
width:80px;
height:40px;
}
}
.shadow{
position:fixed;
z-index:0;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,.4);
}
