前言
📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！
🍅 个人主页：南木元元
目录
确认对话框
回车键快捷确认
自定义指令实现回车删除
实现思路
实现代码
使用指令
结语
确认对话框
Ant Design Vue 中的Modal对话框是一种非常常见的 UI 组件，可以实现弹窗的显示、隐藏、确认和取消等功能。
对话框适用于展示重要信息、执行用户交互以及承载复杂操作，其中有个很重要的使用场景就是二次弹窗确认，它指的是提示用户确认一个关键或不可逆的操作，比如在删除操作时，需要二次弹窗确认，主要是为了防止误操作并避免误操作导致的数据或信息丢失。
1.防止误操作
删除操作通常是不可逆的，可能会导致数据丢失。用户在界面中可能因为以下原因误触删除按钮：
- 快速操作时点击错误。
- 不清楚按钮的功能。
- 滑动或触摸设备上的误操作。
通过二次弹窗确认，可以让用户明确知道自己即将执行的操作，并确认是否继续。
2.提供清晰的风险提示
二次确认弹窗能够向用户明确提示删除的后果，例如：
- 数据删除后无法恢复。
- 可能导致相关依赖功能不可用。
- 用户需要承担的责任或影响。
通过明确的语言，增强用户对操作后果的理解，从而减少误操作导致的问题。
回车键快捷确认
在用户界面设计中，用户体验是必须要考虑的。所谓的用户体验设计，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。良好的用户体验设计，是团队在产品开发中每一个环节共同努力的结果。
在 Ant Design Vue 的项目中，Modal对话框常用于删除确认，但每次都需要点击确认按钮可能不够高效。为了提高操作效率，方便习惯使用键盘的用户，项目中应该提供回车键快捷确认的功能。
删除二次弹窗的示例代码：
<template><div><a-button type="primary" @click="showModal"> 删除 </a-button><a-modalv-model="visible"title="确认删除"okText="确认"cancelText="取消"@ok="handleOk"@cancel="handleCancel"><p>你确定要删除这条记录吗？操作不可恢复！</p></a-modal></div>
</template><script>
export default {data() {return {visible: false,};},methods: {showModal() {this.visible = true;},handleOk() {this.visible = false;},handleCancel() {this.visible = true;},},
};
</script>那么该如何实现回车键快捷确认呢？
有两种方式：
- 直接在Modal上实现
- 自定义指令
使用自定义指令的好处：复用性强，降低重复代码，逻辑独立，是一种更优雅且高效的解决方案。
下面就来介绍如何在项目中自定义封装一个回车删除的指令，从而优化用户体验。
自定义指令实现回车删除
实现思路
指令的实现思路其实很简单：
1.监听键盘回车事件：判断用户是否按下 Enter 键。
2.执行绑定的方法：触发 Modal 的删除确认逻辑。
监听键盘事件主要通过window.addEventListener方法进行全局监听，当用户按下回车键时，执行定义的逻辑。
const handleKeydown = (event) => {if (event.key === 'Enter') {console.log('键盘回车事件')}
}// 监听键盘回车事件
window.addEventListener('keydown', handleKeydown)接下来考虑如何执行绑定的方法？
vue指令钩子函数有几个重要参数：
- el：指令所绑定的元素，可以用来直接操作 DOM。
- binding：包含指令属性的对象，如指令名、指令的绑定值、传给指令的参数等。
- vnode：Vue 编译生成的虚拟节点。
上述vnode是Vue 编译生成的虚拟节点，它包含了当前指令绑定的元素的相关信息以及 Vue 实例的上下文。vnode 的常见属性：
其中vnode.context是当前指令所绑定的 Vue 实例，可以访问实例中的数据和方法。
在指令中，我们通过vnode.context获取绑定的方法，并在触发事件时调用它。
实现代码
import Vue from 'vue'/*** 注册全局指令v-enter：实现回车删除*/
const enter = Vue.directive('enter', {/*** 指令第一次绑定到元素时调用* @param {object} el 指令所绑定的元素* @param {object} binding 包含指令属性的对象* @param {object} vnode Vue 编译生成的虚拟节点*/bind: function (el, binding, vnode) {// 获取指令的参数，如v-enter:deleteProject中参数为‘deleteProject’const methodName = binding.argconst handleKeydown = (event) => {if (event.key === 'Enter') {// 阻止默认行为：button按钮在获得焦点(foucs)的情况下，敲击键盘enter键也会触发button按钮的click事件event.preventDefault()// 调用传入的方法if (typeof vnode.context[methodName] === 'function') {vnode.context[methodName]()}}}// 监听键盘回车事件window.addEventListener('keydown', handleKeydown)// 保存当前的处理函数，以便在 unbind 时移除el.__handleKeydown__ = handleKeydown},/*** 指令与元素解绑时调用* @param {object} el 指令所绑定的元素*/unbind(el) {// 移除事件监听window.removeEventListener('keydown', el.__handleKeydown__)delete el.__handleKeydown__},
})export default enter
使用指令
指令说明：
- 名称：
v-enter - 用法：在需要回车删除的modal弹窗组件上使用
v-enter:[method]，其中method是触发的删除方法名。
使用示例：
<a-modal v-enter:deleteProject @ok="deleteProject">是否确定删除</a-modal> 当键盘回车时，即相当于鼠标点击确认，执行删除操作。
效果：
结语
本文分享了如何通过封装一个自定义指令，实现回车键快捷确认功能。这不仅可以为习惯使用键盘的用户提供更快的操作体验，还可以提升整体用户体验的流畅性和一致性。
🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~
