React鼠标多选功能的配置方法
2021-05-25 04:10
871 查看
一般列表都有选择功能,单选复选多选都很常见。在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能。
# 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 全选
> 鼠标拖动,范围多选
示例:
<MouseMultiples wrapperScroll="classify-img_body" itemClass='selection_box' activeClass='selection_box-active' activePosition={activePosition} onSelected={selected} isDataChange={imageLists} {imageLists.map(item => { return ( <div className="selection_box" data-position={item.FileId} > <div className="listImage"><img src={ item.FileUrl } /></div> </div> ) })} </MouseMultiples>
> 说明:
> children 自定义设计,样式,格子,选中效果等.
> 导入组件直接包裹已经设计好的列表即可,确保className和itemClass一致,确保导入data-position,和activeClass是否存在高亮样式。。。
以上就是React鼠标多选功能的详细内容,更多关于React鼠标多选的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:相关文章推荐
- 详解react应用中的DOM DIFF算法
- React事件机制源码解析
- React useMemo和useCallback的使用场景
- React ref的使用示例
- react diff算法源码解析
- 详解react setState
- 详解React中key的作用
- 详解React 父组件和子组件的数据传输
- React 错误边界组件的处理
- react循环数据(列表)的实现
- React中useRef的具体使用
- React Hooks常用场景的使用(小结)
- 详解react的两种动态改变css样式的方法
- React获取input值并提交的2种方法实例
- React如何利用Antd的Form组件实现表单功能详解
- 基于react hooks,zarm组件库配置开发h5表单页面的实例代码
- React+Koa实现文件上传的示例
- 深入理解React Native核心原理(React Native的桥接(Bridge)
- React Hook的使用示例
- React.Children的用法详解