import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';
Vue.use(Sidebar);
Vue.use(SidebarItem);
通过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
};
}
}; 设置dot属性后，会在右上角展示一个小红点。设置info属性后，会在右上角展示相应的徽标
<van-sidebar v-model="activeKey">
<van-sidebar-item title="标签名称" dot />
<van-sidebar-item title="标签名称" info="5" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>
通过disabled属性禁用选项
<van-sidebar v-model="activeKey">
<van-sidebar-item title="标签名称" />
<van-sidebar-item title="标签名称" disabled />
<van-sidebar-item title="标签名称" />
</van-sidebar>
设置change方法来监听切换导航项时的事件
<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 });
}
}
} | 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
v-model v2.0.4 | 当前导航项的索引 | number | string | 0 |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 切换导航项时触发 | index: 当前导航项的索引 |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 内容 | string | '' |
dot v2.2.1 | 是否显示右上角小红点 | boolean | false |
| info | 右上角徽标的内容 | number | string | - |
disabled v2.2.0 | 是否禁用该项 | boolean | false |
| url | 点击后跳转的链接地址 | string | - |
to v2.0.4 | 点击后跳转的目标路由对象，同 vue-router 的 to 属性 | string | object | - |
replace v2.0.4 | 是否在跳转时替换当前页面历史 | boolean | false |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | index: 当前导航项的索引 |