介紹

垂直展示的導航欄，用于在不同的內容區(qū)域之間進行切換。

實例演示

引入

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

import { createApp } from 'vue';
import { Sidebar, SidebarItem } from 'vant';

const app = createApp();
app.use(Sidebar);
app.use(SidebarItem);

代碼演示

基礎用法

通過 v-model 綁定當前選中項的索引。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" />
</van-sidebar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

徽標提示

設置 dot 屬性后，會在右上角展示一個小紅點；設置 badge 屬性后，會在右上角展示相應的徽標。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" dot />
  <van-sidebar-item title="標簽名稱" badge="5" />
  <van-sidebar-item title="標簽名稱" badge="20" />
</van-sidebar>

禁用選項

通過 disabled 屬性禁用選項。

<van-sidebar v-model="active">
  <van-sidebar-item title="標簽名稱" />
  <van-sidebar-item title="標簽名稱" disabled />
  <van-sidebar-item title="標簽名稱" />
</van-sidebar>

監(jiān)聽切換事件

設置 change 方法來監(jiān)聽切換導航項時的事件。

<van-sidebar v-model="active" @change="onChange">
  <van-sidebar-item title="標簽名 1" />
  <van-sidebar-item title="標簽名 2" />
  <van-sidebar-item title="標簽名 3" />
</van-sidebar>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => Toast(`標簽名 ${index + 1}`);
    return {
      active,
      onChange,
    };
  },
};

API

Sidebar Props

Sidebar Events

SidebarItem Props

SidebarItem Events

SidebarItem Slots

樣式變量

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