0.5.1

NavBar 导航栏 ​

介绍 ​

为页面提供导航功能，常用于页面顶部。设计稿导航栏高度 48px，无底部分割线；大标题变体总高 104px。

引入 ​

通过以下方式来引入组件。

js
import { createApp } from 'vue';
import { DhIcon } from '@szhn/dh-design-icons';
import { NavBar } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(NavBar);

示例中的返回、搜索、更多、小程序入口、关闭图标均使用 DhIcon。

代码演示 ​

基础用法 ​

通过 title 属性设置导航栏标题。

html
<van-nav-bar title="标题" />

返回上级 ​

在导航栏左侧放置返回图标。

html
<van-nav-bar title="标题" @click-left="onClickLeft">
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
</van-nav-bar>
js
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

右侧按钮 ​

在导航栏右侧添加可点击的按钮。right-text 使用主题色。

html
<van-nav-bar title="标题" right-text="按钮" @click-left="onClickLeft" @click-right="onClickRight">
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
</van-nav-bar>
js
import { showToast } from '@szhn/dh-design-mobile';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const onClickRight = () => showToast('按钮');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

使用插槽 ​

可以通过插槽自定义导航栏两侧的内容。

html
<van-nav-bar title="标题">
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
  <template #right>
    <dh-icon name="magnifier" size="24" />
  </template>
</van-nav-bar>

禁用按钮 ​

通过 left-disabled 或 right-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低，且无法点击。

html
<van-nav-bar
  title="标题"
  left-disabled
  right-disabled
  right-text="按钮"
>
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
</van-nav-bar>

标题居左 ​

标题也可以放在左侧区域，适合二级页面或轻量工具页。使用 dh-nav-bar__left-title，图标与标题间距 8px。

html
<van-nav-bar>
  <template #left>
    <span class="dh-nav-bar__left-title">
      <dh-icon name="left" size="24" />
      <strong>标题文字</strong>
    </span>
  </template>
</van-nav-bar>

右侧更多 ​

右侧可放置更多操作入口，图标尺寸 24px。

html
<van-nav-bar title="标题文字">
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
  <template #right>
    <dh-icon name="dot-grid-horizontal-filled" size="24" />
  </template>
</van-nav-bar>

胶囊按钮 ​

右侧可组合更多和小程序入口按钮，适配小程序类页面。使用 dh-nav-bar__capsule，尺寸 87×32。

html
<van-nav-bar title="标题文字">
  <template #left>
    <dh-icon name="left" size="24" />
  </template>
  <template #right>
    <span class="dh-nav-bar__capsule">
      <dh-icon name="dot-grid-horizontal-capsule-filled" size="18" />
      <span class="dh-nav-bar__capsule-divider" />
      <dh-icon name="mini-program" size="16" />
    </span>
  </template>
</van-nav-bar>

大标题 ​

使用 dh-nav-bar--large 包裹导航栏，主标题放在 dh-nav-bar__large-title，对应设计稿总高 104px、主标题 22px。

html
<div class="dh-nav-bar dh-nav-bar--large">
  <van-nav-bar>
    <template #left>
      <span class="dh-nav-bar__left-action">
        <dh-icon name="left" size="24" />
        <span>返回</span>
      </span>
    </template>
    <template #right>
      <dh-icon name="dot-grid-horizontal-filled" size="24" />
    </template>
  </van-nav-bar>
  <div class="dh-nav-bar__large-title">标题文字</div>
</div>

搜索栏 ​

搜索入口可放在左侧区域。无返回时搜索条宽 221px，有返回时宽 165px。

html
<van-nav-bar>
  <template #left>
    <span class="dh-nav-bar__search">
      <dh-icon name="magnifier" size="16" />
      <span>搜索</span>
    </span>
  </template>
  <template #right>
    <dh-icon name="dot-grid-horizontal-filled" size="24" />
  </template>
</van-nav-bar>
html
<van-nav-bar>
  <template #left>
    <span class="dh-nav-bar__search-with-back">
      <dh-icon name="left" size="24" />
      <span class="dh-nav-bar__search">
        <dh-icon name="magnifier" size="16" />
        <span>搜索</span>
      </span>
    </span>
  </template>
  <template #right>
    <span class="dh-nav-bar__capsule">
      <dh-icon name="dot-grid-horizontal-capsule-filled" size="18" />
      <span class="dh-nav-bar__capsule-divider" />
      <dh-icon name="mini-program" size="16" />
    </span>
  </template>
</van-nav-bar>

返回与关闭 ​

左侧可同时放置返回和关闭入口，间距 12px。

html
<van-nav-bar title="标题文字">
  <template #left>
    <span class="dh-nav-bar__double-left">
      <dh-icon name="left" size="24" />
      <dh-icon name="close" size="24" />
    </span>
  </template>
  <template #right>
    <dh-icon name="dot-grid-horizontal-filled" size="24" />
  </template>
</van-nav-bar>

状态栏 ​

状态栏是系统顶栏示意，不是 Vant 组件。高度 44px。dh-status-bar 为深色图标（设计稿「黑」），dh-status-bar--white 为浅色图标（设计稿「白」）。

html
<div class="dh-status-bar dh-status-bar--white">
  <span class="dh-status-bar__time">9:41</span>
  <!-- 信号 / Wi-Fi / 电池 -->
</div>
<div class="dh-status-bar">
  <span class="dh-status-bar__time">9:41</span>
</div>

API ​

Props ​

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-disabled是否禁用左侧按钮，禁用时透明度降低，且无法点击booleanfalse
right-disabled是否禁用右侧按钮，禁用时透明度降低，且无法点击booleanfalse
left-arrow是否显示左侧箭头booleanfalse
border是否显示下边框booleantrue
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时，是否在标签位置生成一个等高的占位元素booleanfalse
z-index导航栏 z-indexnumber | string1
safe-area-inset-top是否开启顶部安全区适配booleanfalse
clickable是否开启两侧按钮的点击反馈booleantrue

设计稿无底部分割线，组件样式默认隐藏 border 产生的 hairline。

Slots ​

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events ​

事件名说明回调参数
click-left点击左侧按钮时触发event: MouseEvent
click-right点击右侧按钮时触发event: MouseEvent

类型定义 ​

组件导出以下类型定义：

ts
import type { NavBarProps } from '@szhn/dh-design-mobile';

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-nav-bar-height48px-
--van-nav-bar-backgroundvar(--dh-mobile-color-surface)-
--van-nav-bar-arrow-size24px-
--van-nav-bar-icon-colorvar(--dh-mobile-color-text-primary)-
--van-nav-bar-text-colorvar(--dh-mobile-color-primary)-
--van-nav-bar-title-font-sizevar(--dh-mobile-font-size-md)-
--van-nav-bar-title-text-colorvar(--dh-mobile-color-text-primary)-
--van-nav-bar-z-index10-
NavBar