Skip to content

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点击返回按钮时触发