介紹

為頁(yè)面提供導(dǎo)航功能，常用于頁(yè)面頂部。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { NavBar } from 'vant';

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

代碼演示

基礎(chǔ)用法

通過(guò) ?title? 屬性設(shè)置導(dǎo)航欄標(biāo)題。

<van-nav-bar title="標(biāo)題" />

返回上級(jí)

在導(dǎo)航欄實(shí)現(xiàn)返回上級(jí)功能。

<van-nav-bar
  title="標(biāo)題"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};

右側(cè)按鈕

在導(dǎo)航欄右側(cè)添加可點(diǎn)擊的按鈕。

<van-nav-bar
  title="標(biāo)題"
  left-text="返回"
  right-text="按鈕"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { showToast } from 'vant';

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

使用插槽

可以通過(guò)插槽自定義導(dǎo)航欄兩側(cè)的內(nèi)容。

<van-nav-bar title="標(biāo)題" left-text="返回" left-arrow>
  <template #right>
    <van-icon name="search" size="18" />
  </template>
</van-nav-bar>

API

Props

Slots

Events

類(lèi)型定義

組件導(dǎo)出以下類(lèi)型定義：

import type { NavBarProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。