mousemultiples
v1.0.6
Published
React component for making selections on elements
Downloads
17
Maintainers
Readme
React mousemultiples
React 鼠标多选组件
React 鼠标多选组件
主要实现鼠标多选的效果, 在不破坏原有的列表情况下,嵌入组件拥有鼠标多选功能。
操作说明:
> 鼠标点击,单选
> Ctrl + 鼠标点击,多选,复选,反选
> Ctrl + a 全选
> 鼠标拖动,范围多选
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导出选中的唯一识别
* 注:带问号为可选项,否则都是必填项。
*/
示例:
<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是否存在高亮样式。。。