Vant Sidebar side navigation

Introduced

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

Vue.use(Sidebar);
Vue.use(SidebarItem);

Code demo

Basic usage

The index of the currently selected item is bound by v-model

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="标签名称" />
  <van-sidebar-item title="标签名称" />
  <van-sidebar-item title="标签名称" />
</van-sidebar>

export default {
  data() {
    return {
      activeKey: 0
    };
  }
};

Tips

When you set the dot property, a small red dot is displayed in the upper right corner. When you set the info property, the logo appears in the upper right corner

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="标签名称" dot />
  <van-sidebar-item title="标签名称" info="5" />
  <van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>

Disable the option

Disable the option with the disabled property

<van-sidebar v-model="activeKey">
  <van-sidebar-item title="标签名称" />
  <van-sidebar-item title="标签名称" disabled />
  <van-sidebar-item title="标签名称" />
</van-sidebar>

Listen for switching events

Set the change method to listen for events when switching navigation items

<van-sidebar v-model="activeKey" @change="onChange">
  <van-sidebar-item title="标签名1" />
  <van-sidebar-item title="标签名2" />
  <van-sidebar-item title="标签名3" />
</van-sidebar>

import { Notify } from 'vant';

export default {
  data() {
    return {
      activeKey: 0
    };
  },
  methods: {
    onChange(index) {
      Notify({ type: 'primary', message: index });
    }
  }
}

Api

Sidebar Props

Sidebar Events

SidebarItem Props

SidebarItem Events