前端小功能：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是否存在高亮樣式。。。

 

 

沒有終點，沒有彼岸，堅持就好，願歲月如初