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

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


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

钩子函数mounted,DOM第一次被渲染出来的时机,也就是操作DOM的最早时机
updated钩子也可以实现,这是可以操作最新的DOM元素的时机
解决方案二:给按钮添加失去焦点事件
打印event.path的结果,可以通过find锁定组件封装的button按钮,并给其添加失去焦点的事件

具体代码如下:

网友评论