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

定义全局键盘监听事件,el-dialog中删除不可用

场景:全局的div增加了鼠标监听事件,而且window中添加了键盘监听事件。

window.addEventListener('keydown', this.handleKeydown)

window.addEventListener('keyup', this.handleKeyup)

事件冒泡,导致阻止无效。

1、在 el-dialog 上同时阻止默认行为和冒泡

<el-dialog
  @keydown.stop.prevent
  // ... other props ...
>
  // ... dialog content ...
</el-dialog>

在el-dialog上添加 @keydown.stop.prevent。可能会导致全部键盘不可用。

2、在 dialog 内部的输入元素上直接处理

<el-dialog>
  <el-input
    @keydown.stop.prevent.native
    // ... other props ...
  />
  // ... other content ...
</el-dialog>

3、在全局键盘事件处理器中添加判断,忽略来自 dialog 的事件

// 全局键盘事件处理器
handleKeyDown(event) {
  // 检查事件源是否在 dialog 内
  const isInDialog = event.target.closest('.el-dialog');
  if (isInDialog) {
    return; // 如果在 dialog 内,直接返回不处理
  }
  
  // 原有的键盘事件处理逻辑
  // ... existing code ...
}

亲测有效!!!

4、使用 v-if 条件来控制全局键盘事件的监听

// 在组件中添加一个控制变量
data() {
  return {
    isDialogVisible: false,
    // ... other data
  }
}

// 在模板中
<div 
  @keydown="isDialogVisible ? null : handleKeyDown"
  // ... other attributes
>
  <el-dialog
    v-model="isDialogVisible"
    // ... other props
  >
    // ... dialog content ...
  </el-dialog>
</div>


http://www.kler.cn/a/381209.html

相关文章:

  • 高级的SQL查询技巧有哪些?
  • 设计模式之【观察者模式】
  • 前端脚手架技术精讲 (1)
  • 【jvm】主要参数
  • API开发:Flask VS FastAPI
  • VSCode:Markdown插件安装使用 -- 最简洁的VSCode中Markdown插件安装使用
  • docker离线使用镜像包还原镜像
  • Python设计模式探究:单例模式实现及应用解析
  • C#中的同步和异步回调
  • QML项目实战:自定义Switch按钮
  • 【毫米波雷达(三)】汽车控制器启动流程——BootLoader
  • NewStar easygui re wp
  • 常见用于从 HTTP 请求中提取数据的注解
  • 使用VBA宏合并多个Excel文件的Sheet页
  • 【unique_str 源码学习】
  • 【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器
  • 小菜家教平台:基于SpringBoot+Vue打造一站式学习管理系统
  • 单链表的实现(数据结构)
  • 成为编程高手 day16
  • Python小白学习教程从入门到入坑------第二十五课 多态(语法进阶)
  • Vue.js 提供了一个事件系统,允许组件之间通过自定义事件进行通信
  • golang安装,常用框架安装,记忆点
  • ChatGPT o1与GPT-4o、Claude 3.5 Sonnet和Gemini 1.5 Pro的比较
  • 【Winform使用DataGridView实现表格数据的添加,编辑、删除、分页功能】
  • 【Go语言】| 第1课:Golang安装+环境配置+Goland下载
  • 基于Python的自然语言处理系列(50):Soft Prompt 实现