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

效果图:
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);
        },
相关推荐
叮咚前端1 分钟前
vue3笔记
前端·javascript·笔记
薛定谔的算法18 分钟前
面试官问箭头函数和普通函数的区别?这才是面试官最想听到的
前端·javascript·面试
pepedd86419 分钟前
AI Coding 最佳实践-从零到一全栈项目编写
前端·aigc·trae
砂糖橘加盐19 分钟前
非 AI 时代前端是如何设计一个组件的
前端·javascript·vue.js
艾小码24 分钟前
告别JavaScript类型转换的坑:从隐式陷阱到显式安全指南
前端·javascript
LEAFF27 分钟前
性能优化工具Lighthouse操作指南
前端
Cache技术分享34 分钟前
176. Java 注释 - 类型注释和可插入类型系统
前端·后端
粥里有勺糖42 分钟前
视野修炼-技术周刊第125期 | nano-banana
前端·github·aigc
hvinsion1 小时前
【开源工具】基于Flask与Socket.IO的跨平台屏幕监控系统实战(附完整源码)
javascript·python·flask·开源·socket.io·屏幕监控·web实战
菠萝+冰1 小时前
手机上访问你电脑上的前端项目
前端·智能手机