Sidebar 侧边导航

基础用法

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

徽标提示

设置 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>

监听切换事件

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

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

API

Sidebar Props

SidebarItem Props

SidebarItem Events

样式变量