美文网首页
element-ui中的$comfirm点击取消后空格键和回车键

element-ui中的$comfirm点击取消后空格键和回车键

作者: 沃德麻鸭 | 来源:发表于2021-08-31 15:40 被阅读0次

在解决这个问题之前,我查了一下其他文章,了解到$comfirm会在上一次执行操作的按钮上自动聚焦选中

可见第一排删除按钮是选中状态

如果这时点击回车或者空格键相当于又触发了一次删除按钮上的点击事件,而且默认回车和空格键会触发弹层上的确认按钮的点击事件,用户没有将鼠标定在确认按钮,这是组件自己封装的自动聚焦事件以及确认提交事件,将两张图的颜色对比一下就可以看出来选中的状态

按钮选中状态的颜色较浅 未选中状态颜色较深

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

强制取消自定义事件

钩子函数mounted,DOM第一次被渲染出来的时机,也就是操作DOM的最早时机

updated钩子也可以实现,这是可以操作最新的DOM元素的时机


解决方案二:给按钮添加失去焦点事件

 打印event.path的结果,可以通过find锁定组件封装的button按钮,并给其添加失去焦点的事件

控制台打印结果

具体代码如下:

给button绑定失去焦点事件

相关文章

  • element-ui中的$comfirm点击取消后空格键和回车键

    在解决这个问题之前,我查了一下其他文章,了解到$comfirm会在上一次执行操作的按钮上自动聚焦选中 如果这时点击...

  • HTML要点

    因为学爬虫学了学了些HTML和CSS,以下是自己总结的一些易错点  一、文本 1.规则 html中的空格键和回车键...

  • python小游戏贪吃蛇源码下载

    回车键:开始游戏,空格键:暂停 / 继续,方向键 或 WSAD 键:控制移动方向 下载地址

  • 无标题

    可以写什么呢 大半夜的 不想用回车键 就用空格键 对 就用空格键 坐在马桶上拉屎 闹肚子 什么也拉不出来 放了个大...

  • Ubuntu安装phpMyAdmin

    环境 安装 更新源 升级源 安装phpmyadmin 按空格键选中apache2,按回车键进入下一步 选中yes,...

  • Linux常用命令

    文件 帮助命令 --help命令 --help manman 命令显示下一屏:空格键一次滚动一行:回车键往前一屏:...

  • 猿学-Java基础教程基本掌握Dos命令练习

    dos命令 打开dos命令窗口 点击电脑左下角的开始按钮-->在最下边的搜索框中输入cmd-->点击回车键 cd/...

  • Mac快捷键大全

    1、空格键:快速查看文件内容 2、回车键:修改文件名称 3、command+I:快速查看文件属性 4、contro...

  • 在HTML代码中要如何插入空格?

    超文本标记语言(HTML)会自动忽略空格。平常在编写代码的时候,用空格键、Tab键以及回车键产生的空格,都会被HT...

  • Python制作游戏:贪吃蛇原理及代码实现

    一、游戏介绍 贪吃蛇是个非常简单的游戏,适合练手。先来看一下我的游戏截图: 玩法介绍: 回车键:开始游戏 空格键:...

网友评论

      本文标题:element-ui中的$comfirm点击取消后空格键和回车键

      本文链接:https://www.haomeiwen.com/subject/hteabltx.html