【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,实体类我们一般都是驼峰,数据库字段一般都是下划线,所以在查询的时候可以起别名解决,属性填充本质上调用的是…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

