vue自定义模态框

  随手写的一个小功能，直接就可以拿去用，能为你节省10多分钟

share()调用模态框

布局：

 <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>

参数：

return{
	popup:false,
}

方法：

share(){
  this.popup = true;
    console.log(this.popup);
  },
  cancel(){
    console.log(this.popup)
    this.popup = false;
}

样式：

@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);
}