需求小能手——ctrl多选

前言

最近评估需求时,有个需求要求可以ctrl多选树状数据。评估时就觉得有点意思,本节就来介绍一下该功能的具体实现。

修饰符

公司技术栈是vue,刚开始想法是去找相关的原生方法,没想到vue中有对应的修饰符------.ctrl,果断使用修饰符实现了该功能,下面来看下具体的用法。
系统按键修饰符能够监听系统按键,当按下相关按键时触发事件并执行相关效果。具体包含以下几种按键:

  • .ctrl、.alt、.shift、.meta
    meta键在各个系统键盘上图标不一样,真的需要用时我们查一下具体对应哪个图标。 还有一个修饰符.exact,该修饰符能够精确触发事件的键盘,设定了该修饰符只有按下对应的系统按键才能触发事件。
js 复制代码
    <!-- 同时按下其他按键 比如alt也能触发 -->
    <el-button @click.ctrl="handleClick"></el-button>
    <!-- 如果有其他按键 不会被触发 只能单独按下ctrl -->
    <el-button @click.ctrl.exact="handleClick"></el-button>

有了ctrl修饰符,想要实现多选功能就非常方便了:

  1. 声明一个数组,用来保存数据。
  2. 增加ctrl修饰符,按住ctrl点击时触发点击事件,获取选中数据添加到数组中。
  3. 优化样式,进行去重校验。
    通过以上步骤我们就拿到了选中数据的list,后面根据具体需求进行处理。步骤非常清楚下面我们用el-tree简单写个demo,需要注意的是label显示,我们需要用slot插槽自定义节点内容,给每个label增加点击事件,并增加ctrl修饰符。 打印一下此时的this.existed,我们选中的label都添加进行了。不过如果重复点击,还会继续添加,所以我们优化一下,增加个判断,数组没有才添加。
js 复制代码
 handleCtrl(node) {
  if (this.existed.indexOf(node.label) === -1) {
    this.existed.push(node.label)
  }
}

以上就是ctrl多选的实现思路,还是非常简单的。如果我们使用的是vue2,要注意对应的版本:

  • .ctrl:2.1.0版本及以上。
  • .exact:2.5.0版本及以上。

键盘事件

修饰符虽然简便,但是对版本有所要求。除了修饰符,我们还可以监听键盘事件,对按键进行判断,如果是ctrlKey,就进行对应的逻辑,实现过程如下:

  • 声明一个布尔值isCtrl,默认为false,并监听按键按下事件。
  • 按键按下进行判断,如果是ctrl,就将isCtrl变为true。
  • label绑定点击事件,如果isCtrl为true,将选择数据进行添加。

该方法就不受版本限制,而且不管是vue,react等也能用此思路实现ctrl多选的功能。最后我们看下这块vue2中对修饰符ctrl的一些源码:

vue在绑定事件与指令都做了相关的处理,实现肯定要比我这个复杂多了。

总结

使用ctrl修饰符或者原生事件都能实现ctrl多选的需求,注意修饰符有版本要求。这种需求虽然简便,但是也很有意思,可玩性还是挺高的。

相关推荐
浮桥15 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥23 分钟前
Vue框架之钩子函数详解
vue.js
七夜zippoe26 分钟前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆1 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
Hockor2 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡2 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu2 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github