SepBreadcrumb 面包屑导航组件 v1.3.1

展示当前页面在系统层级结构中的位置 · items 数据驱动 / separator 分隔符 / icon 图标 / href 链接 / onClick 回调 / disabled 禁用 / maxItems 折叠 / size 尺寸 / itemRender 自定义渲染 / 末项自动高亮

1. 基础用法

HTML 声明式标签
JS API 初始化

2. 自定义分隔符 separator

HTML 声明式标签
JS API 初始化

3. 带图标 icon

HTML 声明式标签
JS API 初始化

4. 链接跳转 href

HTML 声明式标签
JS API 初始化

5. 点击回调 onClick

JS API 初始化(onClick 为函数,声明式建议用 @click 绑定全局函数)
未点击

6. 禁用项 disabled

HTML 声明式标签
JS API 初始化

7. maxItems 折叠

HTML 声明式标签
JS API 初始化

8. 尺寸 size

HTML 声明式标签
JS API 初始化

9. itemRender 自定义渲染

JS API 初始化(itemRender 为函数,仅支持 JS API)

10. 动态更新 setItems

JS API 初始化:通过 setItems 动态更新路径
更新路径

11. showPopover 折叠弹层

JS API 初始化:点击「...」展开被折叠的路径项

12. copyable 可复制路径

JS API 初始化:右侧复制按钮,点击复制完整路径文本

13. items[i].dropdown 下拉菜单

JS API 初始化:点击带下拉箭头的项展开子菜单,子项点击触发统一 onClick 回调
未选择

14. responsive 响应式折叠

JS API 初始化:根据容器宽度自动折叠,调整窗口大小观察

15. separatorType 分隔符预设

JS API 初始化:slash(/) / arrow(›) / dot(·) 等预设分隔符一键切换

16. activeKey 激活项高亮

JS API 初始化:通过 activeKey 匹配 items[i].key 高亮当前激活项

17. items[i].badge 徽标

JS API 初始化:支持数字徽标 / 红点徽标 / 超限 99+ 显示

18. items[i].tooltip 提示

JS API 初始化:长文本项 hover 时显示完整标题提示

19. items[i].dropdownProps 下拉配置

JS API 初始化:trigger=hover 悬停触发,placement=top 向上展开

20. 自动化断言