需求小能手——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多选的需求,注意修饰符有版本要求。这种需求虽然简便,但是也很有意思,可玩性还是挺高的。

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python