当前位置: 首页 > news >正文

uni-app 点击蒙版层时关闭自定义弹窗

@click.stop:用于阻止冒泡

@click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗

@click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗

在 template 中

<view class="pop-box" v-if="showPop" @touchmove.stop.prevent="toMoveHandle" @click="showPop = false"><view @click.stop>弹窗内容</view>
</view>
<view @click="showPop = true">打开弹窗</view>

在 script 中

data() {return {showPop: false,}
}

toMoveHandle 方法请查看:uniapp 禁止遮罩层下的页面滚动

在 style 中

.pop-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: 999;
}

相关文章:

uni-app 点击蒙版层时关闭自定义弹窗

click.stop&#xff1a;用于阻止冒泡 click.stop 标签范围内&#xff0c;点击任何区域(包括 click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗 click.stop 标签内的 click 等事件&#xff1a;如果事件内有关闭弹窗的代码可关闭弹窗 在 template 中 <view class&quo…...

【红包雨功能的】环境部署(弹性伸缩、负载均衡、Redis读写分离、云服务器部署)

文章目录 创建环境创建专用网络VPC安全组创建云服务器打包部署2. Java环境启动项目开机启动任意服务1. 制作服务文件2. 制作启动脚本3. 制作停止脚本4. 增加执行权限5. 设置开机启动 创建镜像继续创建多台云服务器负载均衡弹性伸缩redis的报警规则白名单1. LAMP 环境1. 安装Apa…...

基于Java的设计模式-策略模式

策略模式就是定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。 基本概念 策略模式主要是解决多种算法相似的情况下&#xff0c;使用if...else所带来的复杂和难以维护。当存在系统中有多个类&#xff0c;但是区分它们的是只是它们的直接行为&#xff0c;那我们…...

小程序多种姿势更换文章

概述 简单的文章切换demo&#xff0c;通过倒计时、摇一摇、双击进行文章切换 详细 直接看效果图吧&#xff01;比较简单&#xff0c;主要是练习一下... 小程序不带双击事件&#xff0c;可以记录第一次单击事件和第二次单机事件进行双击操作。 1、摇一摇是通过调用官方的 …...

读书笔记-《ON JAVA 中文版》-摘要25[第二十二章 枚举]

文章目录 第二十二章 枚举1. 基本功能1.1 基本 enum 特性 2. 方法添加2.1 方法添加2.2 覆盖 enum 的方法 3 switch 语句中的 enum4. values 方法的神秘之处5. 实现而非继承6. 随机选择7. 使用接口组织枚举8. 使用 EnumSet 替代 Flags9. 使用 EnumMap10. 常量特定方法11. 本章小…...

DNDC模型建模方法及应用

DNDC&#xff08;Denitrification-Decomposition&#xff0c;反硝化-分解模型&#xff09;是目前国际上最为成功的模拟生物地球化学循环的模型之一&#xff0c;自开发以来&#xff0c;经过不断完善和改进&#xff0c;从模拟简单的农田生态系统发展成为可以模拟几乎所有陆地生态…...

Kafka为什么是高性能高并发高可用架构

目录 1 前言2 顺序写入3 页缓存4 零拷贝5 Broker 性能6 流数据并行7 总结 1 前言 我们都知道 Kafka 是基于磁盘进行存储的&#xff0c;但 Kafka 官方又称其具有高性能、高吞吐、低延时的特点&#xff0c;其吞吐量动辄几十上百万。小伙伴们是不是有点困惑了&#xff0c;一般认为…...

QT-day3

完成文本编辑器的保存工作 void Widget::on_savebton_clicked() {QString fileName QFileDialog::getSaveFileName(this,"保存","./","All(*.*);;Images(*.png *.xpm *.jpg);;Text files (*.txt);;XML files (*.xml)");QFile file(fileName);i…...

开发自测的测试用例设计方法

测试用例设计方法有&#xff1a;等价类划分法、边界值分析法、错误推测法、判定表法、正交实验法。 测试用例就是一个文档&#xff0c;描述输入、动作、或者时间和一个期望的结果&#xff0c;其目的是确定应用程序的某个特性是否正常的工作。 一.等价类划分法 顾名思义&#x…...

【AI视野·今日Sound 声学论文速览 第七期】Tue, 19 Sep 2023

AI视野今日CS.Sound 声学论文速览 Tue, 19 Sep 2023 Totally 1 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Frame-to-Utterance Convergence: A Spectra-Temporal Approach for Unified Spoofing Detection Authors Awais Khan, Khalid Mahmood Ma…...

MySQL 清空表 截断表

清空表&#xff1a;delete from users&#xff1b; 清空表只是清空表中的逻辑数据&#xff0c;但是物理数据不清除&#xff0c;如主键值、索引等不被清除&#xff0c;还是原来的值。 截断表&#xff1a;truncate table users&#xff1b; 截断表可以用于删除表中 的所有数据…...

2020-2023中国高等级自动驾驶产业发展趋势研究-中国高等级自动驾驶发展近况

1.2 中国高等级自动驾驶发展近况 通过对中国高等级自动驾驶行业的观察和分析&#xff0c;亿欧汽车认为&#xff0c;除技术解决方案提供商外&#xff0c;如今的车企、政府、资本同样在产业链中扮演重要角色。此外&#xff0c;车路协同技术的发展也为高等级自动驾驶的发展提供了更…...

Spring学习之ImportBeanDefinitionRegistrar接口

一、本文内容分类 1、接口功能 2、接口运用场景 3、使用案例 4、注意事项 二、接口功能介绍 描述&#xff1a;ImportBeanDefinitionRegistrar接口是也是spring的扩展点之一,它可以支持我们自己写的代码封装成BeanDefinition对象,注册到Spring容器中&#xff0c;功能类似于注…...

React 全栈体系(八)

第四章 React ajax 三、案例 – github 用户搜索 2. 代码实现 2.3 axios 发送请求 Search /* src/components/Search/index.jsx */ import React, { Component } from "react"; import axios from axiosexport default class Search extends Component {search …...

4.开放-封闭原则

这个原则其实是有两个特征&#xff0c;一个是说‘对于扩展是开放的(Open for extension)&#xff0c;另一个是说‘对于更改是封闭的(Closed for modification)[ASD]。...

oracle递归with子句

比如现在想获取开始日期到结束日期每个月的月底日期&#xff0c;这个时候可以通过递归实现&#xff1a; --通过递归with子句获取开始日期到结束日期每个月的月末日期 WITH date_range (month_start, month_end) AS (SELECT TRUNC(to_date(bdate,yyyy-mm-dd), MM),LAST_DAY(to_…...

如何在Proteus进行STM32F103C8T6模拟以及keil5开发

一、下载Proteus 8和keil5 最新版 Proteus 8.15 Professional 图文安装教程&#xff08;附安装包&#xff09;_proteus密钥_main工作室的博客-CSDN博客Keil uVision5 5.38官方下载、安装及注册教程_keil uvision5下载_这是乐某的博客-CSDN博客 二、新建STM32F103C8项目 接下来…...

C# OpenCvSharp 图片模糊检测(拉普拉斯算子)

效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Windows.Forms.VisualStyl…...

志高团队:广阔前景 全新的投资理财体验

当今时代,数字金融迅猛发展,投资理财领域正在经历前所未有的重大变革。作为加拿大华企联合会控股旗下的重要项目,恒贵即将启动,旨在为广大投资者带来全新的投资理财体验。这一创新项目的优势和广阔前景受到了业内观察机构的广泛关注和期待。 恒贵作为一家全新的P2C多元化投资理…...

基于自编译的onlyoffice镜像,关于修改字体的问题

基于自编译的onlyoffice镜像&#xff0c;关于修改字体的问题 自编译onlyoffice镜像来自于 https://blog.csdn.net/Gemini1995/article/details/132427908 该镜像里面没有documentserver-generate-allfonts.sh文件&#xff0c;所以需要自己创建一个&#xff08;建议放在/usr/b…...

SyntaxUI:基于Tailwind CSS与Framer Motion的React组件库实战指南

1. 项目概述&#xff1a;SyntaxUI&#xff0c;一个为现代Web开发者提速的组件库如果你和我一样&#xff0c;常年奋战在React、Next.js项目的一线&#xff0c;那你一定对“重复造轮子”这件事深恶痛绝。每次新项目启动&#xff0c;从零开始搭建按钮、卡片、模态框、导航栏&#…...

ensp关闭完美世界运行时显示权限不够

Windows PowerShell 版权所有&#xff08;C&#xff09; Microsoft Corporation。保留所有权利。安装最新的 PowerShell&#xff0c;了解新功能和改进&#xff01;https://aka.ms/PSWindowsPS C:\Users\Administrator> net stop MessageTransfer 发生系统错误 5。拒绝访问。…...

Gemini Deep Research调用失败?5类报错代码详解+官方未公开的API绕过方案(限时技术内参)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini Deep Research功能怎么用 Gemini Deep Research 是 Google 推出的面向专业研究者的增强型推理能力模块&#xff0c;专为长上下文分析、跨文档信息整合与假设验证设计。启用该功能需通过 Gemini …...

Arm CoreSight TPIU-M调试架构与寄存器配置详解

1. Arm CoreSight TPIU-M架构概述 在嵌入式系统调试领域&#xff0c;Arm CoreSight架构提供了一套完整的调试与跟踪解决方案。作为该架构中的关键组件&#xff0c;Trace Port Interface Unit-Modified&#xff08;TPIU-M&#xff09;承担着将处理器内部跟踪数据输出到外部调试工…...

AI设计风格Prompt实战指南:从32种风格词典到精准生成

1. 项目概述&#xff1a;一份给AI设计师的“风格词典”如果你和我一样&#xff0c;经常用 Claude、Cursor 或者 v0 这类 AI 工具来生成网页界面&#xff0c;那你肯定遇到过这个头疼的问题&#xff1a;脑子里想的是“赛博朋克”或者“瑞士风格”&#xff0c;但打出来的 prompt 却…...

QMCDecode:Mac上最简单的QQ音乐加密音频解密工具

QMCDecode&#xff1a;Mac上最简单的QQ音乐加密音频解密工具 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结…...

鸣潮自动化工具ok-ww终极指南:3步配置解放双手的智能助手

鸣潮自动化工具ok-ww终极指南&#xff1a;3步配置解放双手的智能助手 【免费下载链接】ok-wuthering-waves 鸣潮 后台自动战斗 自动刷声骸 一键日常 Automation for Wuthering Waves 项目地址: https://gitcode.com/GitHub_Trending/ok/ok-wuthering-waves 你是否厌倦了…...

华为OD机试真题 新系统 2026-05-06 JavaGoC语言 实现【匹配命令行前缀关键字】

目录 题目 思路 Code 题目 给定一组命令行字符串和一个命令前缀&#xff0c;需要找出所有以前缀开头的命令行表达式中&#xff0c;前缀之后的第一个关键字&#xff0c;并将这些关键字按字典序排序后返回。 如果找不到匹配前缀则返回空&#xff1b;匹配出多个相同关键字时只返…...

Cursor-Learner:基于编辑器历史数据,自动生成个性化AI编程助手Prompt

1. 项目概述&#xff1a;一个帮你“诊断”编程习惯的智能助手 如果你和我一样&#xff0c;每天都在和 Cursor 或 WindSurf 这类 AI 驱动的代码编辑器打交道&#xff0c;那你肯定也遇到过这样的困惑&#xff1a;为什么有时候 AI 助手能精准地理解你的意图&#xff0c;写出漂亮的…...

Gemini自动生成PPT实战手册:从零输入到专业演示文稿,3步完成95%的幻灯片工作流

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini自动生成PPT的核心原理与能力边界 Gemini 生成 PPT 的本质并非传统模板填充&#xff0c;而是基于多模态理解与结构化内容重构的端到端推理过程。其核心依赖于对用户输入&#xff08;文本、大纲、…...