方块式可视化列表

block-list

方块式可视化列表

API

| 参数名 | 说明 | 类型 | 默认值 | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------- | | dataSource | 数据源，dataSource 中存在 backIconType 时，展示 Icon 组件为背景图 | Array | - | | primaryKey | 唯一标识 | string | id | | size | 指定方块大小可选值 small, medium, large | Enum/Number | 'medium' | | selectedKeys | （用于受控）当前选中节点 key 的数组 | Array | - | | defaultSelectedKeys | （用于非受控）默认选中节点 key 的数组 | Array | - | | onSelect | 选中或取消选中节点时触发的回调函数，回传 keys,infos | Function | - | | highlightKeys | 高亮色块 | Array | - | | labelRender | 色块内文本 render | Function | (block) => block.label | | disabled | 是否全局禁用色块选择 | Boolean | false | | disabledRender | 色块是否禁用选择 render | Function | (block) => block.disabled | | boxProps | Box 组件属性透传 | Object | - | | tagProps | Tag.Selectable 组件属性透传 | Object | - | | isSearch | 是否处于搜索模式，一般是有关键字或过滤条件时传为 true，该模式下所有色块变透明，highlightKeys 对应的色块高亮；否则所有色块无透明和高亮效果 | Boolean | false |

change log

-- 2021.09.01
---- 1. 还原上一次处理（色块全部高亮时，禁用的色块透明度为 0.5），即禁用色块高亮效果与其他色块一致，无特殊处理；

-- 2021.08.31
---- 1. dataSource 数据中增加 backIconType 字段，存在该字段时，组件中设置 Icon 组件的 type，且作为背景图显示； ---- 2. 背景图的大小目前为固定的 27px; ---- 3.  禁用的色块去掉背景颜色的设置，只保留鼠标手势和事件禁用； ---- 4. IP 地址功能中对禁用的色块，应同时设置 backIconType 和 disabled； ---- 5. 去掉色块 4px 的圆角，使用 tag 组件本身的 2px 的圆角； ---- 6. 更新“受控展示”demo 中的颜色色值； ---- 7. 色块全部高亮时，禁用的色块透明度为 0.5； ---- 8. 色块选中的样式修改，tag 组件选中三角的背景色改为白色，对勾颜色使用父级色块的颜色；

-- 2021.08.23
---- 1. 修改框选时遮罩的计算逻辑，兼容多层级定位布局； ---- 2. 兼容内滚出现滚动条时的框选；

-- 2021.08.20
---- 1. 添加 disabled 属性与 demo 样例，可全局设置或在 dataSource 中单项设置； ---- 2. 被 disabled 的色块组件内部不会做处理，保持原 disabled 设置与选中的项进行回调；

-- 2021.08.10
---- 1. 处理清空场景下，传 selectedKeys=[]不生效的问题； ---- 2. 主动修改 selectedKeys 时，不回调 onChange 事件，防止循环调用； ---- 3. 重复选择相同 key 时，不响应 onChange 事件

-- 2021.08.04
---- 1. 添加鼠标滑选特效； ---- 2. 取消 selectMode 参数，点击为单选，ctrl/command 按住单击为多选，鼠标按住拖动为滑选； ---- 3. 取消 boxProps 参数，内部取消了 Box 组件； ---- 4. 取消 onSelect 方法回调时的第二个参数，原因为：内部实现方法改动，暂无法获取当前节点数据，后续版本再支持； ---- 5. 由于增加了鼠标滑选操作，单击时如果鼠标抖动会认为是滑选操作，可能会引起选中又取消的现象；