完美解决vant浮动气泡+弹出菜单
使用框架:
vue3,vant4
项目需求:
需要有一个浮动气泡,点击弹出导航菜单
遇到的问题:
1. 使用van-floating-bubble包裹van-popover,但点击后只会重复显示不能隐藏
2. popover位置固定,不能根据floating-bubble改变位置
解决:
1. 去掉popover绑定的v-model:show,改为使用show属性
2. 使用floating-bubble的offsetChange事件,获取当前的x和y,判断当前浮动气泡在什么位置,来修改popover的placement
代码:
template:
<!-- 磁吸导航 -->
<van-floating-bubble @offset-change="onOffsetChange" axis="xy" magnetic="x" icon="chat" @click.stop.prevent="showPopover = !showPopover"><van-icon class-prefix="ti" name="baseline-density-medium" size="24" /><van-popover :show="showPopover" :placement="popoverPlacement" :offset="[10, 40]" :show-arrow="false"@closed="showPopover=false"><ul><template v-for="item in childTabList" :key="item"><li>{{ item.name }}</li></template></ul></van-popover>
</van-floating-bubble>
javascript:
<script setup>
const showPopover = ref(false)
// 磁吸偏移量
const popoverPlacement = ref('left-end')
function onOffsetChange(offset) {const viewportWidth = window.innerWidth;const viewportHeight = window.innerHeight;const { x, y } = offset;const horizontalCenter = viewportWidth / 2;const verticalCenter = viewportHeight / 2;// 判断 x, y 来设置 Popover 的弹出位置if (y > verticalCenter) {// 靠近底部if (x > horizontalCenter) {// 气泡在屏幕右下角,Popover 向上弹出并靠右popoverPlacement.value = 'top-end';} else {// 气泡在屏幕左下角,Popover 向上弹出并靠左popoverPlacement.value = 'top-start';}} else {// 靠近顶部if (x > horizontalCenter) {// 气泡在屏幕右上角,Popover 向下弹出并靠右popoverPlacement.value = 'bottom-end';} else {// 气泡在屏幕左上角,Popover 向下弹出并靠左popoverPlacement.value = 'bottom-start';}}
}
</script>
相关文章:
完美解决vant浮动气泡+弹出菜单
使用框架: vue3,vant4 项目需求: 需要有一个浮动气泡,点击弹出导航菜单 遇到的问题: 1. 使用van-floating-bubble包裹van-popover,但点击后只会重复显示不能隐藏 2. popover位置固定,不能根据…...
SpringSecurity -- 入门使用
文章目录 什么是 SpringSesurity ?细节使用方法 什么是 SpringSesurity ? 在我们的开发中,安全还是有些必要的 用 拦截器 和 过滤器 写代码还是比较麻烦。 SpringSecurity 是 SpringBoot 的底层安全默认选型。一般我们需要认证和授权…...
C语言习题~day33
1.以下程序运行时,若输入1abcedf2df输出结果是() #include <stdio.h> int main() { char a 0, ch; while ((ch getchar()) ! \n) { if (a % 2 ! 0 && (ch > a && ch < z)) ch ch - a A; a; putchar(ch); }…...
作业报告┭┮﹏┭┮(Android反调试)
一:Android反调试 主要是用来防止IDA进行附加的,主要的方法思路就是,判断自身是否有父进程,判断是否端口被监听,然后通过调用so文件中的线程进行监视,这个线程开启一般JNI_OnLoad中进行开启的。但是这个是…...
在 Delphi BSD11中安装 DCU 格式的第三方组件库
在 Delphi BSD 11 中安装 DCU 格式的第三方组件库可以按照以下步骤进行: 打开 Delphi:启动 Delphi 开发环境。 选择安装组件: 在菜单栏中,选择 Component -> Install Component。 选择 DCU 文件: 在弹出的对话框中…...
综合题第二题(路由器的配置)
题目 如何计算子网掩码 第一类 我们可以观察到上图的IP地址后面有“/26”、“30”。我们都知道子网掩码是由多个连续“1”和多个连续“0”组成的,“、26”表示子网掩码的二进制表达中有26个1。 例如:156.95.9.128/26 1111 1111.1111 1111.1111 1111.1…...
人工智能概览
目录 什么是人工智能 人工智能的历史与发展 人工智能发展时间轴示意图: 人工智能的主要分支 机器学习与深度学习在AI中的地位 什么是人工智能 人工智能(Artificial Intelligence, AI)是指由人制造出来的具有一定智能的系统,能够理…...
[vulnhub] Prime 1
https://www.vulnhub.com/entry/prime-1,358/ 主机发现端口扫描 探测存活主机,137是靶机 nmap -sP 192.168.75.0/24 // Starting Nmap 7.93 ( https://nmap.org ) at 2024-09-22 16:25 CST Nmap scan report for 192.168.75.1 Host is up (…...
JavaSE——lombok、juint单元测试、断言
一、lombok的使用 默认jvm不解析第三方注解,需要手动开启 链式调用 二、juint单元测试 下载juint包 public class TestDemo {// 在每一个单元测试方法执行之前执行Beforepublic void before() {// 例如可以在before部分创建IO流System.out.println("befor…...
商标价值如何评估与增值?
商标是企业的标志,代表着企业的产品或服务质量、信誉和形象。一个具有高知名度和美誉度的商标,能够为企业带来巨大的商业价值。它不仅可以帮助企业在市场中脱颖而出,吸引消费者的关注和购买,还可以作为企业的重要资产进行融资、并…...
linux命令之firewall-cmd用法
firewall-cmd Linux上新用的防火墙软件,跟iptables差不多的工具 补充说明 firewall-cmd 是 firewalld的字符界面管理工具,firewalld是centos7的一大特性,最大的好处有两个:支持动态更新,不用重启服务;第…...
深入浅出CSS盒子模型
“批判他人总是想的太简单 剖析自己总是想的太困难” 文章目录 前言文章有误敬请斧正 不胜感恩!什么是盒子模型?盒子模型的组成部分详解1. 内容区(Content)2. 内边距(Padding)3. 边框(Border&am…...
字符编码发展史4 — Unicode与UTF-8
上一篇《字符编码发展史3 — GB2312/Big5/GBK/GB18030》我们讲解了ANSI编码中的GB2312/Big5/GBK/GB18030。本篇我们将继续讲解字符编码的第三个发展阶段中的Unicode与UTF-8。 2.3. 第三个阶段 国际化 前面提到的第二个阶段,各个国家和地区各自为政,纷纷…...
【flink】之如何消费kafka数据并读写入redis?
背景: 最近公司出现做了一个新需求,需求内容是加工一个营销时机,但是加工营销时机的同时需要把数据内容里的一个idmapping存入redis用于后续的读写。 准备: <!-- 依赖 --><dependency><groupId>org.apache.fl…...
搜索引擎onesearch3实现解释和升级到Elasticsearch v8系列(二)-索引
场景 首先介绍测试的场景,本系列schema定义 pdm文档索引,包括nested,作为文档扩展属性字段,_content字段是组件保留字段,支持文本内容,字段属性还有其他属性,如boost,getter&#x…...
离散化算法
离散化 在C中,离散化通常指的是将连续的数值或数据转化为离散的形式。这在数值分析、信号处理、图像处理和机器学习等领域都非常常见。以下是一些离散化的基本概念和方法: 1.区间划分: 将连续变量的值域分成多个区间,每个区间对…...
基于ollama的本地RAG实践
先放参考的原文链接大语言模型实战——搭建纯本地迷你版RAG_本地rag-CSDN博客 一、大模型选择 在我之前的文章中有讲到,我用的是ollama中的llama3.1 Ollama在Windows安装,使用,简单调用API_ollama如何对外提供api-CSDN博客 二、嵌入模型 …...
安卓开发板_MTK开发板_联发科开发评估套件Demo板接口介绍
开发板是一种功能丰富的电路平台,专为开发人员设计,集成了多种传感器、扩展接口和通信模块。这使得开发者能够高效进行原型设计和功能验证,极大地简化了软硬件开发的过程。 此次介绍的安卓开发板由MT8788核心板与底板构成,特别之处…...
代码随想录冲冲冲 Day58 图论Part9
47. 参加科学大会(第六期模拟笔试) 根据昨天的dijkstra进行堆优化 使用的原因是点多但边少 所以直接对于边进行操作 1.对于priority_queue来说 这是最小堆, 小于的话就是最大堆 之后由于是根据边来说的 所以新建一个Edge并且初始化一下 之后由于使用…...
UnityHub下载任意版本的Unity包
1)先打开 // 也可以采用2直接打开 2)也可以直接打开 下载存档 (unity.com) 3)关联起来UnityHub即可...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
