面包屑 Breadcrumb
演示
基本用法
自定义分隔符
显示下拉框
隐藏
API
Tag Props
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| separator | string | - | > | 默认文字分隔符 |
| separator-icon | string | - | - | meri-icon 图标库名称 |
| nameKey | string | - | name | item渲染对象的取值key |
| itemNum | number | - | 10 | 中间item超过显示省略号,下拉框 |
| data | Array | - | [] | 数据列表,格式参照以下 |
| nameWidth | number | - | 面包屑单个宽度,默认自适应 | |
| popWidth | number | - | 弹出框宽度,默认自适应,限制最小96px | |
| widthAuto | boolean | true/false | false | 面包屑宽度是否要自适应 |
Event
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| change | Function(item: any, event: MouseEvent) | - | - | 点击回调事件 |
// 单个对象 配合nameKey可自定义
export type Item = {
url: string;
name: string;
style?: CSSProperties // 单个面包屑的样式
}