完美解决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即可...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
