Vant3 NavBar 導(dǎo)航欄

介紹

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

實例演示

引入

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

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

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

代碼演示

基礎(chǔ)用法

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

import { Toast } from 'vant';

export default {
  setup() {
    const onClickLeft = () => Toast('返回');
    const onClickRight = () => Toast('按鈕');
    return {
      onClickLeft,
      onClickRight,
    };
  },
};

使用插槽

通過插槽自定義導(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

樣式變量

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