键盘党福音！自定义指令实现回车快捷删除

前言

📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

🍅 个人主页：南木元元****

确认对话框

Ant Design Vue 中的Modal对话框是一种非常常见的 UI 组件，可以实现弹窗的显示、隐藏、确认和取消等功能。

对话框适用于展示重要信息、执行用户交互以及承载复杂操作，其中有个很重要的使用场景就是二次弹窗确认，它指的是提示用户确认一个关键或不可逆的操作，比如在删除操作时，需要二次弹窗确认，主要是为了防止误操作并避免误操作导致的数据或信息丢失。

1.防止误操作

删除操作通常是不可逆的，可能会导致数据丢失。用户在界面中可能因为以下原因误触删除按钮：

• 快速操作时点击错误。
• 不清楚按钮的功能。
• 滑动或触摸设备上的误操作。

通过二次弹窗确认，可以让用户明确知道自己即将执行的操作，并确认是否继续。

2.提供清晰的风险提示

二次确认弹窗能够向用户明确提示删除的后果，例如：

• 数据删除后无法恢复。
• 可能导致相关依赖功能不可用。
• 用户需要承担的责任或影响。

通过明确的语言，增强用户对操作后果的理解，从而减少误操作导致的问题。

回车键快捷确认

在用户界面设计中，用户体验是必须要考虑的。所谓的用户体验设计，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。良好的用户体验设计，是团队在产品开发中每一个环节共同努力的结果。

在 Ant Design Vue 的项目中，Modal对话框常用于删除确认，但每次都需要点击确认按钮可能不够高效。为了提高操作效率，方便习惯使用键盘的用户，项目中应该提供回车键快捷确认的功能。

删除二次弹窗的示例代码：

<template>
  <div>
    <a-button type="primary" @click="showModal"> 删除 </a-button>
    <a-modal
      v-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>

那么该如何实现回车键快捷确认呢？

有两种方式：

1. 直接在Modal上实现
2. 自定义指令

使用自定义指令的好处：复用性强，降低重复代码，逻辑独立，是一种更优雅且高效的解决方案。

下面就来介绍如何在项目中自定义封装一个回车删除的指令，从而优化用户体验。

自定义指令实现回车删除

实现思路

指令的实现思路其实很简单：

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.arg
    const 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>  

当键盘回车时，即相当于鼠标点击确认，执行删除操作。

效果：

结语

本文分享了如何通过封装一个自定义指令，实现回车键快捷确认功能。这不仅可以为习惯使用键盘的用户提供更快的操作体验，还可以提升整体用户体验的流畅性和一致性。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~