防止element-ui Dialog 弹框复制意外关闭方法

最新推荐文章于 2023-09-07 17:34:43 发布

波塞西呀

最新推荐文章于 2023-09-07 17:34:43 发布

阅读量360

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_1307495/article/details/124469841

版权

在网上找了好多，都不是我想要的，于是自己写了一个，保存起来，下次用
美中不足的事这个方法每个地方都要写，
有个思路是对dialog二次封装，下次尝试

<template>
  <div>
      <!-- xxxxxxxxxxx -->
    <el-dialog 
        :visible.sync="isOpen" top="20vh"
        title="保存成功"
        width="582px" custom-class="improveSettingPay-dialog"
        :before-close="onClose"
        append-to-body :close-on-click-modal="false"
        @mousedown.native="handleDialogMousedown($event)"
        @mouseup.native="handleDialogMouseup($event)">
        <div class="dialog-box">
            <h4>xxxxxxxxxxx</h4>
            <p class="tips-desc">xxxxxxxxxxx</p>
            <div class="cont-body">
                
                <!-- 二维码图片 -->
                <div class="qr-img-box" ref="qrCodeUrl">
                    <!-- <img src="@/assets/image/salary/icon-qr.png" alt=""> -->
                    <img :src="qrUrlImg" alt="">

                </div>
                <!-- 扫码人 -->
                <img class="ren-img" src="@/assets/image/salary/icon-code-r.png" alt="">
            </div>
            <el-button>我知道了</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
    components:{
    },
    props: {
        isOpen: Boolean,
        list: Array,
        qrUrlData: String
    },
    data () {
        return {
            qrUrlImg: '',
            classDialogmodel: false,
        }
    },
    created(){
       
    },
    methods: {
        onClose () {
            this.$emit('onClose')
        },
        // 监测弹框鼠标事件
        handleDialogMousedown(e) {
            // 如果为true，则表示点击发生在遮罩层
            this.classDialogmodel= !!e.target.classList.contains('el-dialog__wrapper')
        },
        handleDialogMouseup(e) {
            if((!!e.target.classList.contains('el-dialog__wrapper')) && this.classDialogmodel){
                this.onClose()
            }
            this.classDialogmodel=false
        },
    },
    watch:{
        isOpen() {
            if(this.isOpen) {
                this.$nextTick (()=> {
                    this.qrUrlImg = new QRCode(this.$refs.qrCodeUrl, {
                        text: this.qrUrlData, // 需要转换为二维码的内容
                        width: 140,
                        height: 140,
                        // colorDark: '#333',
                        // colorLight: '#FFEAEA',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
// xxxxxxxxxxx
@{deep}.improveSettingPay-dialog {
    .el-dialog__header {
        padding: 26px 30px 20px;
        border-bottom: 1px solid #E9E9E9;
        font-size: 16px;
        line-height: 16px;
        font-family: 'PingFang-SC-Medium';
        font-weight: 500;
        color: #666666;
        .el-dialog__headerbtn {
            top: 25px;
        }
        .el-icon-close {
            font-size: 18px;
        }
    }
    .dialog-box {
        padding: 20px 0;
        text-align: center;
        .tips-desc {
            line-height: 36px;
            color: #666666;
        }
        .el-button {
            border-color: #3277FF;
            background: #3277FF;
            color: #fff;
            height: 36px;
            padding: 0 18px;
        }
    }
    .el-dialog__body {
        padding:0 24px !important;
        .cont-body {
            padding-top: 24px;
            padding-bottom: 90px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .ren-img {
                position: absolute;
                bottom: 20px;
                left: 50%;
                margin-left: 80px;
            }
        }
        .qr-img-box {
            width: 252px;
            height: 209px;
            margin: 0 auto;
            padding: 30px;
            position: relative;
            background: url('~@/assets/image/salary/icon-qr-bg.png') 100%;
            img {
                position: absolute;
                left: 52px;
                width: 145px;
            }
        }
    }
  
}
</style>