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 向上展开