mousemultiple v0.1.1

React mousemultiple

React 鼠标多选组件

React 鼠标多选组件

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

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

安装

npm i mousemultiple

使用配置项

/**
 * 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快捷键 + 鼠标左键 实现反选 or 多选。

示例：

<MouseMultiple
   wrapperScroll="classify-img_body"
   itemClass='selection_box'
   activeClass='selection_box-active'
   activePosition={activePosition}
   onSelected={selected}
   isDataChange={imageLists}
>
   {imageLists.map(item => {
       return (
           <Col key={item.FileId}>
               <div 
               className="selection_box" 
               data-position={item.FileId}
               >
                   <div className="listImage"><img src={ item.FileUrl } /></div>
               </div>
           </Col> 
       )
   })}
</MouseMultiple>

说明： children 自定义设计，样式，格子，选中效果