@riil-frontend/component-block-list

intro component

Usage no npm install needed!

<script type="module">
  import riilFrontendComponentBlockList from 'https://cdn.skypack.dev/@riil-frontend/component-block-list';
</script>

README

方块式可视化列表

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. 由于增加了鼠标滑选操作,单击时如果鼠标抖动会认为是滑选操作,可能会引起选中又取消的现象;