NavBar 导航栏

使用指南

位于 app 内容区的上方，系统状态栏的下方，并且提供在一系列页面中的导航能力。

规则

• 可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
• 避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了。
• 为图标和文字控件，提供更大的点击热区。

代码演示

查看代码

<template>
  <div class="list">
    <p>基本用法</p>
    <h3-nav-bar @leftClick="onLeftClick" title="标题" />
    <p>快捷用法</p>
    <h3-nav-bar
      @leftClick="onLeftClick"
      @rightClick="onRightClick"
      leftText="返回"
      rightText="更多"
      rightIcon="more"
      title="标题"
    />
    <p>暗色主题</p>
    <h3-nav-bar @leftClick="onLeftClick" mode="dark" title="标题" />
    <p>插槽</p>
    <h3-nav-bar @leftClick="onLeftClick" mode="light" title="插槽">
      <template #right>
        <h3-icon @click="onRightClick" type="search-o" />
        <h3-icon @click="onRightClick" type="more" />
      </template>
    </h3-nav-bar>
  </div>
</template>
<script>
import H3NavBar from '@/components/h3-nav-bar/';
import H3Icon from '@/components/h3-icon';

export default {
  components: {
    H3NavBar,
    H3Icon,
  },
  data () {
    return {};
  },
  methods: {
    onLeftClick () {
      console.log('left click');
    },
    onRightClick () {
      console.log('right click');
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库结构混乱，右边区域未提供简易的使用方式。重构后的组件新增了左右对称prop，增加对应事件监听。

若要做迁移请参考

1. 弃用的props：className onLeftClick rightButtons
2. 替换的props：
3. 新增的props：leftText rightText leftIcon rightIcon fixed border
4. 弃用原来所有的事件

API

Prop

属性	说明	类型	默认值
title	标题文本	string	-
mode	模式，dark light	string	'light'
leftText	左边区域文本	string	-
rightText	右边区域文本	string	-
leftIcon	左边区域 icon	string	'left'
rightIcon	右边区域 icon	string	-
fixed	是否固定在顶部	boolean	false
border	是否显示下边框	boolean	false

Event

事件名	说明	参数
leftClick	点击左边区域触发	-
rightClick	点击右边区域触发	-

Slots

参数	说明
left	左边区域插槽
default	默认插槽
right	右边区域插槽