Header 头部

import { Header } from 'feui';
components: {
  [Header.name]: Header
}

代码演示

基础用法

<fe-header>我是一个标题</fe-header>

自定义返回事件

<fe-header style="background-color:#f00;" 
    @on-click-back='clickBack' 
    :left-options="{preventGoBack: true}" >自定义返回事件
</fe-header>

 methods: {
  clickBack () {
     alert('自定义返回事件')
   }
}

不显示返回按钮

<fe-header :left-options="{showBack: false}">不显示返回按钮</fe-header>

不显示左边文字

<fe-header :left-options="{backText: ''}">不显示左边文字</fe-header>

显示更多按钮

<fe-header :right-options="{showMore: true}" 
  @on-click-more="showMenus = true">显示更多按钮
</fe-header>

右边加点东西

<fe-header>右边连接<a slot="right">Feedback</a></fe-header>

标题要长

<fe-header>标题要长长长长长长长长长长长长长长长长长长长长长长长
  <a slot="right">Feedback</a>
</fe-header>

左边加点东西

<fe-header>左边也能现实点啥<a slot="left">Close</a></fe-header>

重写左边

<fe-header>
  <span>重写左边</span>
  <fe-icon slot="overwrite-left" type="navicon" size="35" 
    style="fill:#fff;position:relative;top:-8px;left:-3px;">
  </fe-icon>
</fe-header>

自定义背景色

<fe-header style="background-color:#000;">自定义背景颜色</fe-header>

API

Slots

Events