# PageHeader 页面头部

# 基础用法

<h-page-container>
  <h-page-header :breadcrumb="breadcrumb" />
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# 返回页面

<h-page-container>
  <h-page-header :breadcrumb="breadcrumb" subtitle="Subtitle" return-icon />
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# 右侧工具栏

<h-page-container>
  <h-page-header :breadcrumb="breadcrumb">
    <template slot="pageHeaderAction">
      <el-button type="iconButton" icon="h-icon-import">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-export">BTN</el-button>
      <el-button type="iconButton" icon="h-icon-setting">BTN</el-button>
    </template>
  </h-page-header>
</h-page-container>

<script>
  export default {
    data() {
      return {
        breadcrumb: ['Title', 'Title', 'Title', 'Title']
      }
    }
  }
</script>

# API

# Attributes

参数	说明	类型	可选值	默认值
affix	是否为图钉模式	Boolean	-	false
breadcrumb	面包屑	Array	-	-
separator	面包屑分隔符	String	-	-
breadcrumb-item-max-width 1.11.5+	面包屑项最大宽度	String/Number	-	'256px'
title	页面标题	String	-	-
subtitle	页面副标题	String	-	-
return-icon	是否显示返回图标	Boolean	-	false
return-router	点击返回图标返回的路由，若不设置会返回历史记录的上一个页面。（会被returnEvent覆盖）	String	-	-
before-return	返回事件执行之前，若返回false，则不会返回	Function	-	-
return-event	点击返回图标后，执行的方法	String	-	-

# Slot

name	说明
pageHeaderAction	页面头部工具栏插槽

← PageContainer 页面容器 PageFooter 固底操作栏 →