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);
        },
相关推荐
zhanshuo18 分钟前
深度揭秘:如何在单页应用(SPA)中完美保留路由切换滚动位置,提升用户体验!
javascript
烛阴43 分钟前
Sin -- 重复的、流动的波浪
前端·webgl
Murray的菜鸟笔记1 小时前
【ref、toRef、toRefs、reactive】
vue.js
北'辰3 小时前
DeepSeek智能考试系统智能体
前端·后端·架构·开源·github·deepseek
前端历劫之路3 小时前
🔥 1.30 分!我的 JS 库 Mettle.js 杀入全球性能榜,紧追 Vue
前端·javascript·vue.js
二哈喇子!4 小时前
Vue3 创建
vue.js
爱敲代码的小旗4 小时前
Webpack 5 高性能配置方案
前端·webpack·node.js
Murray的菜鸟笔记4 小时前
【Vue Router】路由模式、懒加载、守卫、权限、缓存
前端·vue router
苏格拉没有底了5 小时前
由频繁创建3D火焰造成的内存泄漏问题
前端
阿彬爱学习5 小时前
大模型在垂直场景的创新应用:搜索、推荐、营销与客服新玩法
前端·javascript·easyui