0

0

如何在 Vuetify 中防止 VMenu 在选择日期时自动关闭

聖光之護

聖光之護

发布时间:2026-02-07 15:44:55

|

151人浏览过

|

来源于php中文网

原创

如何在 Vuetify 中防止 VMenu 在选择日期时自动关闭

当 vmenu 内嵌 vuetify 的日期选择器(如 appdatetimepicker)时,点击日期会导致菜单意外关闭;可通过 `persistent` 属性阻止默认关闭行为,并结合 `no-click-animation` 消除多余动画,实现稳定交互。

在 Vuetify 中,VMenu 默认会在用户点击菜单内部任意可交互元素(包括日期选择器的面板、日历单元格等)后触发关闭逻辑——这是因为日期选择器组件(如 或封装后的 )内部会触发原生事件冒泡或焦点变更,被 VMenu 误判为“菜单外点击”,从而调用 close()。

你尝试过的 @click.stop 和 :close-on-content-click="false" 之所以无效,原因在于:

  • @click.stop 仅阻止直接绑定元素上的事件冒泡,而日期选择器的点击发生在其内部动态渲染的日历面板上(非 根节点),无法通过简单修饰符拦截;
  • :close-on-content-click="false" 是 VDialog / VBottomSheet 的属性,不适用于 VMenu —— VMenu 并无该 prop,因此设置后无实际效果。

✅ 正确解法:使用 persistent + no-click-animation

VMenu 支持 persistent 布尔属性(Vuetify 官方文档),启用后将完全禁用所有自动关闭行为(包括点击外部、按 Esc、点击内部内容等)。虽然这会牺牲“点击外部关闭”的便捷性,但在日期选择场景下是合理取舍。

立即学习前端免费学习笔记(深入)”;

Hika AI
Hika AI

Hika AI是一个免费的AI智能搜索引擎

下载

同时,启用 persistent 后,VMenu 在日期选择完成瞬间可能触发一次微小的关闭-重开动画(因内部状态同步延迟),添加 no-click-animation 可彻底消除该视觉抖动。

? 修改你的代码如下(关键改动已高亮):


  no-click-animation    
>
  
  
    
      

{{ item.description }}

⚠️ 注意事项:

  • persistent 是“全有或全无”策略:若需保留“点击外部关闭”功能,需自行监听 @click:outside 事件并手动控制 model-value(推荐配合 v-model:menu 实现受控模式);
  • 确保 本身未强制触发 blur 或 focusout 导致父级 VMenu 失焦关闭(可检查其源码是否调用了 this.$nextTick(() => this.$refs.input?.blur()) 类逻辑);
  • 若项目升级至 Vuetify 3.4+,建议改用 VDatePicker + VDialog 组合替代嵌套于 VMenu 的方案,语义更清晰、控制更灵活。

✅ 总结:对内嵌日期选择器的 VMenu,优先使用 persistent 破局,辅以 no-click-animation 提升体验;这是 Vuetify 官方支持、稳定可靠的标准实践。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
点击input框没有光标怎么办
点击input框没有光标怎么办

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

192

2023.11.24

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

47

2026.02.10

MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

34

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

27

2026.02.10

铁路12306订票与退改全攻略_高效购票与座位选取技巧
铁路12306订票与退改全攻略_高效购票与座位选取技巧

本专题全面汇总铁路12306订票、退票、改签及候补订单操作技巧,提供车厢座位分布参考、抢票攻略和高铁安检注意事项,帮助新手用户快速掌握高效购票与退改流程,提高出行效率和体验。

31

2026.02.10

TensorFlow2深度学习模型实战与优化
TensorFlow2深度学习模型实战与优化

本专题面向 AI 与数据科学开发者,系统讲解 TensorFlow 2 框架下深度学习模型的构建、训练、调优与部署。内容包括神经网络基础、卷积神经网络、循环神经网络、优化算法及模型性能提升技巧。通过实战项目演示,帮助开发者掌握从模型设计到上线的完整流程。

0

2026.02.10

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

4

2026.02.10

Go语言微服务架构与gRPC实战
Go语言微服务架构与gRPC实战

本专题面向有 Go 基础的开发者,系统讲解微服务架构设计与 gRPC 的高效应用。内容涵盖服务拆分、RPC 通信、负载均衡、错误处理、服务注册与发现等关键技术。通过实战案例,帮助开发者搭建高性能、可扩展的 Go 微服务系统。

1

2026.02.10

React 18状态管理与Hooks高级实践
React 18状态管理与Hooks高级实践

本专题专注于 React 18 的高级开发技术,详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧,以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例,帮助前端开发者构建可维护、性能优良的现代 React 应用。

4

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 8.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号