首页 > 其他分享 >element-ui中的$comfirm点击取消后空格键和回车键依然执行删除操作

element-ui中的$comfirm点击取消后空格键和回车键依然执行删除操作

时间:2023-08-01 11:23:07浏览次数:33  
标签:code comfirm element 点击 ui 按钮 mounted 空格键

原因: $comfirm会在上一次执行操作的按钮上自动聚焦选中如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件,而且默认回车和空格键会触发弹层上的确认按钮的点击事件,用户没有将鼠标定在确认按钮,这是组件自己封装的自动聚焦事件以及确认提交事件

解决方法:强制取消键盘的默认行为,在钩子(mounted)函数中 

  mounted() {
    window.addEventListener('keydown', e => {
      if (e.path[0].nodeName === 'BUTTON') {
        if (e.code === 'Space' || e.code === 'Enter') {
          e.preventDefault()
        }
      }
    })
  }

 

标签:code,comfirm,element,点击,ui,按钮,mounted,空格键
From: https://www.cnblogs.com/bisiyuan/p/17595985.html

相关文章

  • 使用elementui中el-input时无法输入问题
    因为要生成动态查询,所以想把查询字段转为动态添加的,然后使用el-input时候,发现el-input无法输入,然后打印出来的话就只能显示输入的第一个字符,后来查询了网上的办法发现,这是因为嵌套太深了,办法是需要$forceUpdate()强制刷新输入框:<el-inputstyle="width:150px;margin-top:......
  • 7种方法!教你如何使用Telerik UI for ASP.NET定制编辑器
    TelerikUIforASP.NETCore是用于跨平台响应式Web和云开发的最完整的UI工具集,拥有超过60个由KendoUI支持的ASP.NET核心组件。它的响应式和自适应的HTML5网格,提供从过滤、排序数据到分页和分层数据分组等100多项高级功能。TelerikUIforASP.NETCore的编辑器是一个多功能的所......
  • Unity的BuildPlayerProcessor:深入解析与实用案例
    UnityBuildPlayerProcessorUnityBuildPlayerProcessor是Unity引擎中的一个非常有用的功能,它可以让开发者在构建项目时自动执行一些操作。这个功能可以帮助开发者提高工作效率,减少手动操作的时间和错误率。在本文中,我们将介绍UnityBuildPlayerProcessor的使用方法,并提供三个使......
  • 【雕爷学编程】Arduino动手做(177)---ESP-32 掌控板
    37款传感器与执行器的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手尝试系列实验,不管成功(程序走通)与否,都会记录下来—小小的进步或是搞......
  • ugui学习 - 自己实现InputField鼠标点击调整光标位置,拖拽修改选中区域
    效果 代码usingUnityEngine;usingUnityEngine.EventSystems;usingUnityEngine.UI;publicclassMyInputField_CaretDragOp:MyInputField_TextSelect,IDragHandler,IPointerDownHandler{publicvoidOnPointerDown(PointerEventDataeventData){......
  • ugui学习 - 自己实现InputField的文本选中
    效果 代码把光标闪烁拿掉了usingUnityEngine;usingUnityEngine.UI;[DisallowMultipleComponent][RequireComponent(typeof(CanvasRenderer))][RequireComponent(typeof(RectTransform))]publicclassMyInputField_TextSelect:MonoBehaviour,ICanvasElement{......
  • SwiftUI的认识与使用
     SwiftUI简介SwiftUI是苹果推出的一个新的UI框架,它使用了声明的方式,通过视图,基础控件和布局控件来进行页面的开发。SwiftUI具有跨平台性,一份SwiftUI代码可以同时跑在iOS、macOS、tvOS、watchOS平台上。SwiftUI编写的页面代码更简洁,广泛使用链式调用。SwiftUI视图和UIKit视图......
  • burpsuite联动xray
    前情提要首先了解一下xray的浏览器初次使用是需要生成ca证书的xray_windows_amd64.exegenca  这里是已经有了所以没出来,执行成功会出现这两个文件 然后将ca.crt这个证书导入到浏览器接下来就可以正常使用了如果是由burp转发过来的数据包其实是可以不用导入ca证书......
  • android UI界面更新之通知与服务结…
    网上看到的,实际操作了下,例子代码如下。加深对BroadcastReceiver与Service理解packageorg.yihu;importandroid.app.Activity;importandroid.content.BroadcastReceiver;importandroid.content.Context;importandroid.content.Intent;importandroid.content.IntentFil......
  • android UI小知识点
    android小知识点4.如何在string.xml资源文件中定义变量第一步:定义string.xml资源文件<resourcesxmlns:android="http://schemas.android.com/apk/res/android"   <stringname="tipTitle">请设置</string> <stringname="test_fmt">\n\n"......