Vant4 NavBar 導(dǎo)航欄

介紹

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

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

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

<van-nav-bar title="標題" />

返回上級

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

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

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

右側(cè)按鈕

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

<van-nav-bar
  title="標題"
  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,
    };
  },
};

使用插槽

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

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

API

Props

Slots

Events

類型定義

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

import type { NavBarProps } from 'vant';

主題定制

樣式變量

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