Vue自定义成功弹窗H5实现类似于小程序的效果

暴富的im2024-01-31 1:35

效果图：

javascript 复制代码

<div class="father">
    
      <div class="success-box" v-if="isSuccess">
            <img src="../../assets/insure/success-logo.png" alt="">
            <span>{{ successTitle }}</span>
        </div>
</div>
    .father{
     position: relative;
    }
    .success-box {
        width: 130px;
        height: 130px;
        border-radius: 8px;
        background: rgba(64, 64, 64, 0.88);
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 21px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -65px;
        margin-top: -65px;
        color: #FFF;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

方法代码：

弹出后，两秒后消失

javascript 复制代码

        ensurePass() {
            this.successTitle = '申请成功'
            this.isSuccess = true; //提交成功显示弹窗
            setTimeout(() => {
                this.isSuccess = false; //2s后自动关闭
            }, 2000);
        },