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> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/11097.html