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

前言

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

 🍅 个人主页:南木元元


目录

确认对话框

回车键快捷确认

自定义指令实现回车删除

实现思路

实现代码

使用指令

结语


确认对话框

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>

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

有两种方式:

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

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

效果:

结语

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AG32既可以做MCU,也可以仅当CPLD使用

Question: AHB总线上的所有外设都需要像ADC一样&#xff0c;通过cpld处理之后才能使用? Reply: 不用。 除了ADC外&#xff0c;其他都是 mcu可以直接配置使用的。 Question: DMA和CMP也不用? Reply: DMA不用。 ADC/DAC/CMP 用。 CMP 其实配置好后&#xff0c;可以直…

深度学习实战人脸识别

文章目录 前言一、人脸识别一般过程二、人脸检测主流算法1. MTCNN2. RetinaFace3. CenterFace4. BlazeFace5. YOLO6. SSD7. CascadeCNN 三、人脸识别主流算法1.deepface2.FaceNet3.ArcFace4.VGGFace5.DeepID 四、人脸识别系统实现0.安装教程与资源说明1. 界面采用PyQt5框架2.人…

【STL】12.unordered_set与unordered_map的模拟实现

一、源码及框架分析 SGI-STL30版本源代码中没有unordered_map和unordered_set&#xff0c;SGI-STL30版本是C11之前的STL版本&#xff0c;这两个容器是C11之后才更新的。但是SGI-STL30实现了哈希表&#xff0c;只容器的名字是hash_map和hash_set&#xff0c;他是作为非标准的容…

macOS 的目录结构

文章目录 根目录 (/)常见目录及其用途示例目录结构注意事项根目录 (/)主要目录及其含义其他目录总结 macOS 的目录结构无论是在 Intel 架构还是 ARM 架构的 Mac 电脑上都是相同的。macOS 的目录结构遵循 Unix 和 BSD 的传统&#xff0c;具有许多标准目录。以下是一些主要目录及…

003 STM32基础、架构以及资料介绍——常识

注&#xff1a; 本笔记参考学习B站官方视频教程&#xff0c;免费公开交流&#xff0c;切莫商用。内容可能有误&#xff0c;具体以官方为准&#xff0c;也欢迎大家指出问题所在。 01什么是STM32&#xff08;宏观&#xff09; STM32属于一个微控制器&#xff0c;自带了各种常用通…

AWS CLI

一、AWS CLI介绍 1、简介 AWS CLI&#xff08;Amazon Web Services Command Line Interface&#xff09;是一个命令行工具&#xff0c;它允许用户通过命令行与 Amazon Web Services&#xff08;AWS&#xff09;的各种云服务进行交互和管理。使用 AWS CLI&#xff0c;用户可以…

aws凭证(一)凭证存储

AWS 凭证用于验证身份&#xff0c;并授权对 DynamoDB 等等 AWS 服务的访问。配置了aws凭证后&#xff0c;才可以通过编程方式或从AWS CLI连接访问AWS资源。凭证存储在哪里呢&#xff1f;有以下几个方法&#xff1a; 一、使用文件存储 1、介绍 文件存储适用于长期和多账户配置…

Linux系统性能优化技巧

系统性能优化 在当今的信息技术领域&#xff0c;Linux系统的性能优化变得越来越重要。随着Linux操作系统的广泛应用&#xff0c;从桌面环境到大型服务器集群&#xff0c;性能优化不仅可以提升系统的响应速度和吞吐量&#xff0c;还能降低资源消耗&#xff0c;从而延长硬件使用…

力扣面试经典 150(上)

文章目录 数组/字符串1. 合并两个有序数组2. 移除元素3. 删除有序数组中的重复项4. 删除有序数组的重复项II5. 多数元素6. 轮转数组7. 买卖股票的最佳时机8. 买卖股票的最佳时机II9. 跳跃游戏10. 跳跃游戏II11. H 指数12. O(1)时间插入、删除和获取随机元素13. 除自身以外数组的…

二分排序

二分问题之前遇到很多次了&#xff0c;不过一直是手写完整二分&#xff0c;现在转变一下想法&#xff0c;直接使用函数lower_bound和upper_bound更方便 lower_bound 有序数组中 查找第一个不小于指定值的位置。 本质二分代码&#xff1a; int lower_bound_custom(int* arr, i…

apache、iis屏蔽限制ip访问(适用虚拟主机)

Linux下规则文件.htaccess(手工创建.htaccess文件到站点根目录) <IfModule mod_rewrite.c> RewriteEngine On #Block ip RewriteCond %{http:X-Forwarded-For} ^(8.8.4.4|8.8.8\.) [OR] RewriteCond %{REMOTE_ADDR} ^(8.8.4.4|8.8.8\.) [OR] RewriteCond %{http:X-Real-…

李春葆《数据结构》——图相关代码

邻接矩阵结构体&#xff1a; #define MAX<最大结点个数> #define INF 32765 //定义无穷 typedef struct{int no;//顶点的编号&#xff1b;InfoType info;//顶点的其他信息 }vertexType;//顶点的类型 typedef struct{int edges[MAX][Max];//邻接矩阵数组 int vertexTy…

经验笔记:Git 中的远程仓库链接及上下游关系管理

Git 中的远程仓库链接及上下游关系管理 1. 远程仓库的链接信息 当你克隆一个远程仓库时&#xff0c;Git 会在本地仓库中记录远程仓库的信息。这些信息包括远程仓库的 URL、默认的远程名称&#xff08;通常是 origin&#xff09;&#xff0c;以及远程仓库中的所有分支和标签。…

聚焦AI存储,联想凌拓全力奔赴

【全球存储观察 &#xff5c; 科技热点关注】 每一个时代&#xff0c;都有每一个时代的骄傲。 在信息化时代&#xff0c;NAS文件存储肩负着非结构化数据管理与存储的重任&#xff0c;NetApp以其创新实力&#xff0c;赢得了全球存储市场的极高声誉。 在数智化时代&#xff0c;…

JavaWeb后端开发知识储备2

目录 1.HttpClient 2.微信小程序开发 3.Spring Cache 1.HttpClient 简单来说&#xff0c;HttpClient可以通过编码的方式在Java中发送Http请求 2.微信小程序开发 微信小程序的开发本质上是前端开发&#xff0c;对于后端程序员来说了解即可 3.Spring Cache Spring Cache 是…

MySQL和ADSDB

ADSDB&#xff08;Aliyun Distributed SQL Database&#xff09; 和 MySQL 都是数据库系统&#xff0c;但它们在架构、用途和特点上有所不同。下面是这两者的主要区别&#xff1a; 1、数据库类型与设计架构 MySQL&#xff1a; 是一个 关系型数据库管理系统&#xff08;RDBMS&a…

基于CNN+RNNs(LSTM, GRU)的红点位置检测(pytorch)

1 项目背景 需要在图片精确识别三跟红线所在的位置&#xff0c;并输出这三个像素的位置。 其中&#xff0c;每跟红线占据不止一个像素&#xff0c;并且像素颜色也并不是饱和度和亮度极高的红黑配色&#xff0c;每个红线放大后可能是这样的。 而我们的目标是精确输出每个红点的…

【java】常用命令记录

1.java 2.jar 2.1 介绍 JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包。(也可以用war包. jar cvf aa.war)当然也是有区别的,JAR包中有一个META-INF\MANIFEST.MF文件,当你找成JAR包时,它会自动生成。JAR包是由JDK安装目录\bin\jar.exe命令生成的&#xff0…

树莓派搭建NextCloud:给数据一个安全的家

前言 NAS有很多方案&#xff0c;常见的有 Nextcloud、Seafile、iStoreOS、Synology、ownCloud 和 OpenMediaVault &#xff0c;以下是他们的特点&#xff1a; 1. Nextcloud 优势&#xff1a; 功能全面&#xff1a;支持文件同步、共享、在线文档编辑、视频会议、日历、联系人…

数据集-目标检测系列- 花卉 鸡蛋花 检测数据集 frangipani >> DataBall

数据集-目标检测系列- 花卉 鸡蛋花 检测数据集 frangipani >> DataBall DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 贵在坚持&#xff01; 数据样例项目地址&#xff1a; * 相关项目 1&#xff09;数据集…