客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。 # React mousemultiples React 鼠标多选组件 局限性> 主要实现鼠标多选的效果, 在不破坏原有的列表情况下，嵌入组件拥有鼠标多选功能。
安装
使用配置项 /** * 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是否存在高亮样式。。。 以上就是React鼠标多选功能的详细内容，更多关于React鼠标多选的资料请关注极客世界其它相关文章！ |
请发表评论