vue h5页面弹窗

WeiAreYoung

已于 2024-05-06 15:25:08 修改

阅读量1k

点赞数 14

文章标签： javascript 前端 html

于 2024-04-10 15:38:18 首次发布

本文链接：https://blog.csdn.net/donwei8/article/details/137599058

版权

div 
<div v-if="isShowQR" class="QRAlert">
    <div class="QR-container">
        <div class="QR-code-bg">
            <div class="title" v-if="isApp">{{selectedItem.title}}APP下载</div>
            <div class="title" v-if="!isApp">{{selectedItem.title}}公众号</div>
            <div class="QR-code">
                <img v-if="isApp" class="QR-image" :src="selectedItem.appUrl">
                <img v-if="!isApp" class="QR-image" :src="selectedItem.weChatUrl">
            </div>
        </div>
        <div class="QR-close" @click="hiddenQR">
            <img class="QR-close-image" src="https://yunsiluguanwang.oss-cn-hangzhou.aliyuncs.com/qr-close.png">
        </div>
    </div>
</div>

script
function showQR(item,app){
    selectedItem.value = item
    isShowQR.value = true
    isApp.value = app
}
function hiddenQR(){
    isShowQR.value = false
}

css样式
.QRAlert{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    .QR-container{
        position: fixed;
        top: 50%;
        left: 50%;
        width: 200px;
        transform: translate(-50%, -50%);
        .QR-code-bg{
            border-radius: 10px;
            background: #C7020B;
            .title{
                width: 100%;
                text-align: center;
                color: #FFFFFF;
                font-size: 17px;
                font-weight: bold;
                padding: 10px;
            }
            .QR-code{
                width: 100%;
                height: 200px;
                .QR-image{
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }
        }
        .QR-close{
            margin-left: 75px;
            margin-top: 20px;
            width: 50px;
            height: 50px;
            .QR-close-image{
                margin-left: 10px;
                margin-top: 10px;
                width: 30px;
                height: 30px;
            }
        }
    }
}

效果