如何搭建php网站_盐城网站建设策划方案_优化防控措施_seoul是哪个国家

前言

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

🍅 个人主页：南木元元

确认对话框

回车键快捷确认

自定义指令实现回车删除

实现思路

实现代码

使用指令

结语

确认对话框

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>

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

效果：

结语

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

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