NavBar 导航栏

使用指南

固定于 App 内容区的上方的组件，提供在一系列页面中的导航能力。

规则

• 导航栏容器：导航栏的高度应固定统一，背景与状态栏保持一致性，导航栏的区域应与原生系统状态栏相互独立
• 导航栏标题：可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。
• 操作按钮：设置于右侧的操作按钮，最多支持设置两个图标按钮或一个文字按钮，可通过二级菜单收纳更多功能操作
• 导航按钮（可选）：设置于左侧的操作按钮，一般承载着导航作用，如返回上一级，可按需设置

代码演示

查看代码

<template>
  <div class="list">
    <!-- <h3-nav-bar mode="dark" title="固定导航" :fixed="true" @leftClick="onLeftClick" /> -->

    <p>一级导航栏 <span class="tip">(适用于首页与功能模块的一级页面)</span></p>
    <h3-nav-bar leftIcon="" title="标题" @leftClick="onLeftClick" />

    <p>二级导航栏 <span class="tip">(适用于二级页面)</span></p>
    <h3-nav-bar title="标题" @leftClick="onLeftClick" />
    <br />
    <h3-nav-bar
      rightText="按钮"
      title="标题"
      @leftClick="onLeftClick"
      @rightClick="onRightClick"
    />
    <br />
    <h3-nav-bar
      rightIcon="IconMoreStroke"
      title="标题"
      @leftClick="onLeftClick"
      @rightClick="onRightClick"
    />
    <br />
    <p>实色背景</p>
    <h3-nav-bar mode="dark" title="标题" @leftClick="onLeftClick" />
    <p>自定义导航</p>
    <h3-nav-bar
      mode="light"
      title="标题"
      :rightIcon="['IconMoreStroke', 'IconFieldRadioStroke']"
      @leftClick="onLeftClick"
      @rightClick="onRightClick"
    />
    <br />
    <h3-nav-bar mode="light" rightIcon="IconMoreStroke" @leftClick="onLeftClick">
      <template #default>
        <span>标题</span>
        <h3-icon class="nav-title-icon" :size="14" type="IconBevelBottomStroke" />
      </template>
    </h3-nav-bar>
    <br />
    <h3-nav-bar mode="light" title="" rightIcon="IconMoreStroke">
      <template #left>
        <h3-avatar class="nav-left-avatar" name="tingle" />
        <span class="nav-left-name">姓名</span>
      </template>
    </h3-nav-bar>
  </div>
</template>
<script>
import H3NavBar from '@/components/h3-nav-bar/';
import H3Icon from '@/components/h3-icon';
import H3Avatar from '@/components/h3-avatar/';

export default {
  components: {
    H3NavBar,
    H3Icon,
    H3Avatar,
  },
  data () {
    return {};
  },
  methods: {
    onLeftClick () {
      console.log('left click');
    },
    onRightClick (item) {
      console.log('right click');
      console.log(item);
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
    .tip {
      font-size: 14px;
      color: #666;
    }
  }
  .nav-left-avatar {
    width: 32px;
    height: 32px;
  }
  .nav-title-icon {
    margin-left: 4px;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的导航栏组件规范修改相关样式

若要做迁移请参考

1. 弃用的props：leftText border
2. 替换的props：
3. 新增的props：safeAreaInsetTop
4. 组件内部定义的onLeftClick、 onRightClick事件由left、right整个父级区域改为其包裹的具体子元素的点击事件

API

Prop

属性	说明	类型	默认值
title	标题文本	string	-
mode	模式，dark light	string	'light'
rightText	右边区域文本	string	-
leftIcon	左边区域 icon	string	'left'
rightIcon	右边区域 icon, 最多支持两个	string | array	-
fixed	是否固定在顶部	boolean	false
safeAreaInsetTop	距离顶部安全距离	number | string	0

Event

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

Slots

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