技術標籤：前端小案例

一，實現的效果

二，注意點

第一點，vant ui的底下的虛線和關閉按鈕，無法放到van dialog元件中，因為蒙版已經定義了。
第二點，彈出框彈出時有動畫，為了實現虛線和關閉按鈕也出現動畫效果，需要額外增加動畫效果
第三點，需要注意蒙版，彈出框，虛線（關閉按鈕），這三者的z-index的關係

三，實現過程原始碼：

<template>
  <div class="qrshowBox" v-show="showQR">
      <van-dialog v-model="showQR"
 
 :show-confirm-button='false' >
        <img src="../assets/images/qr.png" alt="">
        <van-button  class="btn">請使用付款碼進行支付</van-button>
      </van-dialog>
      <div class="footer">
          <span class="dash">
 
</span>
          <span class="delImg" @click="close()"></span>
      </div>
  </div>
</template>

<script>
export default {
    props: {
        showQR: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return
 
 {
        };
    },
    methods:{
        close(){
            this.$emit('closeQR')
        }
    }
}
</script>

<style lang='less' scoped>
@keyframes myfirst
{
0%   {
        transform: scale(0);
        transform-origin: center -300px;
    }
10% {
        transform: scale(0.6);
        transform: translateY(-100px);
    }
100% {
        transform: scale(1);
    }
}
.qrshowBox{
    position: relative;
    /deep/.van-dialog{
        width: 482px;
        overflow: auto;
        top:39%;
        border-radius: 20px;
        height: 562px;
        text-align: center;
        z-index: 2047;
        .van-dialog__content{
            height: 562px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: au;
            img{
                width: 380px;
                height: 380px;
                vertical-align: middle;
                margin: 40px 0;
                flex-shrink: 0;
            }
            .btn{
                width: 100%;
                height: 102px;
                background: linear-gradient(180deg, #68AAFF 0%, #3771FF 100%);
                border-radius: 0px 0px 20px 20px;
                border: none;
                font-size: 32px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
    }
    .footer{
        position: absolute;
        animation: myfirst 0.3s;
        top: -200px;
        width: 100%;
        display: flex;
        z-index: 9999;
        flex-direction: column;
        align-items: center;
        .dash{
            display: block;
            margin: 0 auto;
            border-left: 1px dashed #ffffff;
            height: 114px;
        }
        .delImg{
            background-image: url(../assets/images/del.png);
            width: 66px;
            height: 66px;
            display: block;
            background-size: 100% 100%; 
        }
    }
}
</style>