热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

React鼠标多选功能的配置方法

本文给大家分享React鼠标多选功能,通过导入组件直接包裹已经设计好的列表即可,操作简单方便,对React鼠标多选相关知识感兴趣的朋友一起看看吧

一般列表都有选择功能,单选复选多选都很常见。在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能。

# React mousemultiples
# React 鼠标多选组件

React 鼠标多选组件 

局限性

> 主要实现鼠标多选的效果, 在不破坏原有的列表情况下,嵌入组件拥有鼠标多选功能。 

npm包地址 [链接](https://www.npmjs.com/package/mousemultiples)

安装 

npm i mousemultiples

使用配置项

/**
 * wrapperScroll?: any, // 滚动单位'ID';
 * 
 * itemClass: string,  // 列表框通用携带 class
 * 
 * activeClass?: string, // 列表框 选中class
 * 
 * isDataChange: any,  // 渲染的数组,检测数据更改
 * 
 * activePosition?: any,  // 主动选中数据
 * 
 * onSelected: (pos: any, item: any, data: any) => void, // 拖动
 * 
 * onSingleSelected?: (pos: any, item: any, data: any) => void, // 单击
 * 
 * 注:itemClass 与 children 循环box className必须携带一致,同box必须绑定data-position,data-position导出选中的唯一识别
 * 注:带问号为可选项,否则都是必填项。
 */

 > 操作说明:
> 鼠标点击,单选
> Ctrl + 鼠标点击,多选,复选,反选
> Ctrl + a 全选
> 鼠标拖动,范围多选

 示例:

 {
        return (
            
) })}

> 说明:

> children 自定义设计,样式,格子,选中效果等.

> 导入组件直接包裹已经设计好的列表即可,确保className和itemClass一致,确保导入data-position,和activeClass是否存在高亮样式。。。

以上就是React鼠标多选功能的详细内容,更多关于React鼠标多选的资料请关注其它相关文章!


推荐阅读
  • 单元测试:使用mocha和should.js搭建nodejs的单元测试
    2019独角兽企业重金招聘Python工程师标准BDD测试利器:mochashould.js众所周知对于任何一个项目来说,做好单元测试都是必不可少 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • feat: Enhances Jest Testing Capabilities with Snapshot Support ... [详细]
  • Angular 4 生产模式编译 ng build --prod --aot 报错解决方案
    在项目中使用 Angular CLI 版本 1.3.2,并通过 cnpm 安装依赖包时,使用 ng build --prod --aot 编译可能会遇到错误。本文将详细介绍该问题的解决方法。 ... [详细]
  • 本文详细记录了 MIT 6.824 课程中 MapReduce 实验的开发过程,包括环境搭建、实验步骤和具体实现方法。 ... [详细]
  • 尽管Medium是一个优秀的发布平台,但在其之外拥有自己的博客仍然非常重要。这不仅提供了另一个与读者互动的渠道,还能确保您的内容安全。本文将介绍如何使用Bash脚本将Medium文章迁移到个人博客。 ... [详细]
  • 解决Oracle GC Agent安全配置失败的问题
    本文详细记录了在配置Oracle Grid Control (GC) Agent时遇到的安全配置失败问题及其解决方法。尽管多次尝试重启和重新配置,问题仍未完全解决,但在某些情况下,通过特定步骤可以部分恢复功能。 ... [详细]
  • c#  项目文件,C#viual studio使用方法
    一、项目文件1)Properties节点下主要存放的是当前程序集相关的信息,如版本号、标题等。双击”Properties“,打开如下项目属 ... [详细]
  • 本文详细介绍了如何在Android应用中实现重复报警功能。示例代码可在以下路径找到:https://developer.android.com/samples/RepeatingAlarm/index.html。首先,我们将从Manifest文件开始分析。 ... [详细]
  • CentOS7通过RealVNC实现多人使用服务器桌面
    背景:公司研发团队通过VNC登录到CentOS服务器的桌面实现软件开发工作为防止数据外泄,需要在RealVNC设置禁止传输文件、访问粘贴板等策略过程&# ... [详细]
  • 本文详细介绍了Sleep函数的基本概念、使用方法及其背后的实现原理。适合对Sleep函数的使用和实现感兴趣的开发者阅读。通过本文,您将了解如何在不同操作系统中使用Sleep函数,以及其在多线程编程中的重要性。 ... [详细]
  • pypy 真的能让 Python 比 C 还快么?
    作者:肖恩顿来源:游戏不存在最近“pypy为什么能让python比c还快”刷屏了,原文讲的内容偏理论,干货比较少。我们可以再深入一点点,了解pypy的真相。正式开始之前,多唠叨两句 ... [详细]
  • Ubuntu 14.04 系统安装后网卡名称修改方法
    本文介绍了在安装 Ubuntu 14.04 Server 版本后,如何将默认的网卡名称从非 eth 格式修改为传统的 eth 格式,并提供了详细的步骤和示例。 ... [详细]
  • 刚入门学习Python,本文章为学习后的总结,如有不对不足的地方,望指点。文章目录变量什么是变量?如何定义变量? ... [详细]
  • 1.前言PAP和CHAP协议是目前的在PPP(MODEM或ADSL拨号)中普遍使用的认证协议,CHAP在RFC1994中定义,是一种挑战响应式协议&#x ... [详细]
author-avatar
激越工作室
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有