前端小功能：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 全选

> 鼠标拖动，范围多选

 示例：

 

<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是否存在高亮样式。。。

 

没有终点，没有彼岸，坚持就好，愿岁月如初