【uniapp】封装一个全局自定义的模态框
【需求描述】
在接口401处,需要实现全局提示并弹出自定义模态框的功能。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限,我决定自行封装全局自定义的模态框,以此为应用程序提供更加统一且个性化的界面。
【效果图】

【封装】
主要是dom树&css样式
<template><view @click="close" class="mask"><!-- @click.stop="onClick" --><view class="content"><div class="title box">{{ options.title }}</div><div class="content2 box"><u--text :lines="3" :size="36" align="center" :text="options.content"></u--text><!-- {{ }} --></div><div class="button box" @click.stop="onClick">确定</div></view></view>
</template><script>
export default {data() {return {options: [],};},onLoad(options) {// 获取配置this.options = options;},methods: {onClick(e) { // 点击确定触发uni.removeStorageSync("token");uni.reLaunch({url: "../index/index",});uni.setStorageSync("isLogin", "yes");console.log(e);// #ifdef APP-NVUEe.stopPropagation();// #endif},close() { // 点击遮罩层触发//为了防止401后再继续调用弹窗uni.setStorageSync("isLogin", "no");// uni.navigateBack();// uni.setStorageSync("isLogin", "yes");console.log("弹窗蒙版");},},
};
</script>
<style>
page {background: transparent;
}
</style><style lang="scss" scoped>
.mask {position: fixed;left: 0;top: 0;right: 0;bottom: 0;/* #ifndef APP-NVUE */display: flex;/* #endif */justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.4);
}.content {border-radius: 10px;width: 360px;height: 180px;background-color: #fff496;display: flex;flex-direction: column;padding: 10px;.box {display: flex;justify-content: center;align-items: center;}.title {height: 25%;font-size: 18px;font-weight: 600;}.content2 {height: 50%;font-size: 16px;}.button {height: 25%;border-top: 1px solid white;font-size: 18px;color: #1890ff;}
}
</style>
【引用】
使用isLogin == 'yes’来防止401重复弹出

let isLogin = uni.getStorageSync('isLogin')
if (args.statusCode == 401 && isLogin == 'yes' && !isRefreshing) {uni.$u.route({url: "/pages/popup/popup",params: {name: "lisa",title: "温馨提示",content: '你的内容',},animationType: "fade-in",animationDuration: 500,});}
【总结】
-
全局自定义的模态框是一种通用的UI组件,它可以在应用程序的任何位置被触发并弹出来。这个模态框可以包含任何类型的内容,比如文本、图片、视频等。
-
开发者可以根据自己的需求,设计出符合应用程序整体风格的模态框,包括颜色、字体、布局等。
-
通过封装全局自定义的模态框,开发者可以大大提高应用程序的用户体验。
-
用户可以更加直观地看到应用程序中的重要信息,并且可以根据提示进行操作。同时,全局自定义的模态框还可以帮助开发者提高应用程序的统一性和品牌形象,增强用户的忠诚度和满意度。
相关文章:
【uniapp】封装一个全局自定义的模态框
【需求描述】 在接口401处,需要实现全局提示并弹出自定义模态框的功能。考虑到uni-app内置的模态框和app原生提示框的自定义能力有限,我决定自行封装全局自定义的模态框,以此为应用程序提供更加统一且个性化的界面。 【效果图】 【封装】 主…...
UNIX 入门
与 UNIX 建立连接启动会话登录命令提示符修改口令退出系统 简单的 UNIX 命令命令格式ls 命令who 命令虚拟终端 tty伪终端 ptywho am i 命令 cal 命令help 命令man 命令 shell 概述shell 命令更换 shell临时更改 shell永久更改 shell 登录过程 与 UNIX 建立连接 启动会话 要启…...
Golang通过alibabaCanal订阅MySQLbinlog
最近在做redis和MySQL的缓存一致性,一个方式是订阅MySQL的BinLog文件,我们使用阿里巴巴的Canal的中间件来做。 Canal是服务端和客户端两部分构成,我们需要先启动Canal的服务端,然后在Go程序里面连接Canal服务端,即可监…...
Python flask-restful 框架讲解
1、简介 Django 和 Flask 一直都是 Python 开发 Web 的首选,而 Flask 的微内核更适用于现在的云原生微服务框架。但是 Flask 只是一个微型的 Web 引擎,所以我们需要扩展 Flask 使其发挥出更强悍的功能。 python flask框架详解:https://blog.…...
MySQL_约束、多表关系
约束 概念:就是用来作用表中字段的规则,用于限制存储在表中的数据。 目的:保证数据库中数据的正确性,有效性和完整性。 约束演示 #定义一个学生表,表中要求如下: #sn 表示学生学号,要求使用 …...
在Qt中使用LoadLibrary无法加载DLL
Qt系列文章目录 文章目录 Qt系列文章目录前言一、问题分析 前言 最近因项目需要使用qt做开发,之前使用LoadLibrary加载dll成功,很庆幸,当一切都那么顺风顺水的时候,测试同事却发现,在windows平台上个别电脑上加载dll会…...
如何将区块链新闻稿发布到海外媒体?
随着区块链技术的不断发展,越来越多的区块链项目涌现出来,各大媒体也开始关注和报道区块链新闻。然而,如何将区块链新闻稿发布到海外媒体成为了许多区块链项目所面临的难题。本文将介绍一些有效的方法,帮助区块链项目将新闻稿发布…...
基于 CentOS 7 构建 LVS-DR 群集。
1.准备实验环境 本次实验我准备了4台虚拟机 DS:DIP--192.168.163.138 VIP--192.168.163.200 RIP1(web1)--192.168.163.140 RIP2(web2)--192.168.163.141 Client:user--192.168.163.142 2.配置服务器环境 1)搭建简易的web服务 RIP1 [rootlocalhost ~]# yum …...
防火墙组建双击热备后,点击管理对端设备,老是打不开,怎么办?
环境: 防火墙 8.0.75 AF-2000-FH2130B-SC 问题描述: 防火墙组建双击热备后,点击管理对端设备,老是打不开,怎么办? 浏览器老是加载 解决方案: 1.打开设置查看双机连接的心跳接口是哪个端口 …...
【Kubernetes】Kubernetes之Pod详解
Pod 一、 Pod1. Pod 基础概念2. 在 Kubrenetes 集群中 Pod 使用方式2.1 pasue 容器2.2 kubernetes 中的 pause 容器提供的功能 3. Pod 的概念和结构组成4. Pod 的分类5. Pod 容器的分类5.1 基础容器(infrastructure container)5.2 初始化容器(…...
电商与客服系统完美对接指南源码-无缝对接唯一客服系统-提升电商客户体验...
提升电商客户体验,无缝对接唯一客服系统,助您商城腾飞! 在如今竞争激烈的电商领域,除了优质的商品和吸引人的价格,出色的客户服务同样不可或缺。一个高效的客服系统能够为您的电商商城带来更多的机会,建立顾…...
新知识:Monkey 改进版之 App Crawler
原生Monkey 大家知道Monkey是Android平台上进行压力稳定性测试的工具,通过Monkey可以模拟用户触摸屏幕、滑动、按键等伪随机用户事件来对设备上的程序进行压力测试。而原生的Android Monkey存在一些缺陷: 事件太过于随机,测试有效性大打折扣…...
黑马头条项目学习--Day3: 自媒体文章发布
Day3: 自媒体文章发布 Day3: 自媒体文章发布1) 素材管理-图片上传a) 前期微服务搭建b) 具体实现 2) 素材管理-图片列表a) 接口定义b) 具体实现 3) 素材管理-照片删除/收藏a) 图片删除a1) 接口定义a2) 代码实现 b) 收藏与取消b1) 接口定义b2) 代码实现 4) 文章管理-频道列表查询…...
使用frp实现内网穿透
1、介绍 当我们想把内网的一些资源暴露在公网上时,可以使用内网穿透功能。比如公司的内网服务器,部署了平时需要开发的项目,但是回到家中无法访问,就可以使用内网穿透,将公司内网的接口映射到一台公网的服务器上&a…...
安装 opendr 踩坑记
复现早期的优化算法需要用到opendr,踩坑一天记录!!! 测试是否成功安装的命令 >>> import opendr >>> opendr.demo("texture")失败案例 python 3.8.15 numpy1.23.0 mayavi4.8.1 chumpy0.70 cpython…...
各地区-各行业法人单位、区划数63个指标(2010-2022年)
一、数据介绍 数据名称:各地区-各行业法人单位、区划数63个指标 数据年份:2010-2022年(法人单位至2021年) 数据样本:404条 数据来源:自我整理 二、指标说明 行政区划代码 地区 长江经济带 经度 纬…...
W5500-EVB-PICO作为TCP Client 进行数据回环测试(五)
前言 上一章我们用W5500-EVB-PICO开发板通过DNS解析www.baidu.com(百度域名)成功得到其IP地址,那么本章我们将用我们的开发板作为客户端去连接服务器,并做数据回环测试:收到服务器发送的数据,并回传给服务器…...
web前端面试--递归(斐波那契数列)
web面试题 本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处 文章目录 web面试题定义源码测试示例 之前去笔试&…...
Vue3 Props组件简单应用(父组件获取子组件数据)
去官网学习→Props | Vue.js 运行示例: 代码:App.vue <template><img alt"Vue logo" src"./assets/logo.png"><h2>Vue Props数据传递</h2><h4>子组件中的数据:{{ content }}</h4>…...
Mybatis查询
返回实体类,必须指定返回类型, resultType不能省略,并且数据库字段名与实体类不一致会填充NULL,实体类我们一般都是驼峰,数据库字段一般都是下划线,所以在查询的时候可以起别名解决,属性填充本质上调用的是…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
【Veristand】Veristand环境安装教程-Linux RT / Windows
首先声明,此教程是针对Simulink编译模型并导入Veristand中编写的,同时需要注意的是老用户编译可能用的是Veristand Model Framework,那个是历史版本,且NI不会再维护,新版本编译支持为VeriStand Model Generation Suppo…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

