一般列表都有选择功能,单选复选多选都很常见。在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能。 # React mousemultiples # React 鼠标多选组件 R
一般列表都有选择功能,单选复选多选都很常见。在自定义循环的列表,图像中,实现鼠标单选,多选,反选功能。
# React mousemultiples
# React 鼠标多选组件
React 鼠标多选组件
> 主要实现鼠标多选的效果, 在不破坏原有的列表情况下,嵌入组件拥有鼠标多选功能。
安装
npm i mousemultiples
使用配置项
> 操作说明:
> 鼠标点击,单选
> 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是否存在高亮样式。。。
以上就是React鼠标多选功能的详细内容,更多关于React鼠标多选的资料请关注编程网其它相关文章!
--结束END--
本文标题: React鼠标多选功能的配置方法
本文链接: https://www.lsjlt.com/news/126431.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0