Page Header 页头
如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。
完整示例
返回
自定义标题内容
自定义的详细内容描述
基础用法
backText 属性可以设置返回的文字,title 属性可以设置标题, content 属性可以设置内容。
返回列表
订单号
订单号:202304180001
自定义图标
默认图标可能无法满足您的需求,您可以通过设置icon属性来自定义图标,或者使用icon插槽来自定义图标。
返回列表
订单号
订单号:202304180001
返回列表
订单号
订单号:202304180001
面包屑导航
面包屑导航一般用于页面路径比较长,或者页面路径比较复杂时,使用breadcrumb插槽来实现。
返回
页面标题
这里是页面的详细描述内容
额外操作部分
额外操作部分一般用于页面操作,使用extra插槽来实现。
返回列表
订单号
订单号:202304180001
主要内容
主要内容一般用于页面内容,使用content插槽或者content属性来实现。
返回列表
订单号
订单号:202304180001
返回列表
订单号
订单号:202304180001
API
PageHeader Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| backText | 返回按钮文字 | string | — | 返回 |
| title | 标题 | string | — | — |
| content | 内容 | string | — | — |
| icon | 图标 | string | — | — |
PageHeader Slots
| 名称 | 说明 |
|---|---|
| icon | 自定义图标 |
| breadcrumb | 面包屑导航 |
| extra | 额外操作部分 |
| content | 主要内容 |
PageHeader Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| back | 点击返回按钮时触发 | — |