Sidebar 侧边导航

引入

  1. import Vue from 'vue';
  2. import { Sidebar, SidebarItem } from 'vant';
  3. Vue.use(Sidebar);
  4. Vue.use(SidebarItem);

代码演示

基础用法

通过v-model绑定当前选中项的索引

  1. <van-sidebar v-model="activeKey">
  2. <van-sidebar-item title="标签名称" />
  3. <van-sidebar-item title="标签名称" />
  4. <van-sidebar-item title="标签名称" />
  5. </van-sidebar>
  1. export default {
  2. data() {
  3. return {
  4. activeKey: 0
  5. };
  6. }
  7. };

提示信息

设置dot属性后,会在右上角展示一个小红点。设置info属性后,会在右上角展示相应的徽标

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

禁用选项

通过disabled属性禁用选项

  1. <van-sidebar v-model="activeKey">
  2. <van-sidebar-item title="标签名称" />
  3. <van-sidebar-item title="标签名称" disabled />
  4. <van-sidebar-item title="标签名称" />
  5. </van-sidebar>

监听切换事件

设置change方法来监听切换导航项时的事件

  1. <van-sidebar v-model="activeKey" @change="onChange">
  2. <van-sidebar-item title="标签名1" />
  3. <van-sidebar-item title="标签名2" />
  4. <van-sidebar-item title="标签名3" />
  5. </van-sidebar>
  1. import { Notify } from 'vant';
  2. export default {
  3. data() {
  4. return {
  5. activeKey: 0
  6. };
  7. },
  8. methods: {
  9. onChange(index) {
  10. Notify({ type: 'primary', message: index });
  11. }
  12. }
  13. }

API

Sidebar Props

参数说明类型默认值
v-model v2.0.4当前导航项的索引string | number0

Sidebar Events

事件名说明回调参数
change切换导航项时触发index: 当前导航项的索引

SidebarItem Props

参数说明类型默认值
title内容string''
dot v2.2.1是否显示右上角小红点booleanfalse
info右上角徽标的内容string | number-
disabled v2.2.0是否禁用该项booleanfalse
url点击后跳转的链接地址string-
to v2.0.4点击后跳转的目标路由对象,同 vue-router 的 to 属性string | object-
replace v2.0.4是否在跳转时替换当前页面历史booleanfalse

SidebarItem Events

事件名说明回调参数
click点击时触发index: 当前导航项的索引

Sidebar 侧边导航 - 图1