vant ui的dialog二次封装使用

一，实现的效果

二，注意点

第一点，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>