Sidebar 侧边导航
引入
// 方式1(推荐)
import Vue from 'vue';
import Sidebar from '@ophiuchus/sidebar';
Vue.use(Sidebar);
// 方式2
import Vue from 'vue';
import { Sidebar, SidebarItem } from '@ophiuchus/sidebar';
Vue.component(Sidebar.name, Sidebar);
Vue.component(SidebarItem.name, SidebarItem);
代码演示
基础用法
通过 v-model
绑定当前选中项的索引。
<sf-sidebar v-model="activeKey">
<sf-sidebar-item title="标签名称" />
<sf-sidebar-item title="标签名称" />
<sf-sidebar-item title="标签名称" />
</sf-sidebar>
export default {
data() {
return {
activeKey: 0,
};
},
};
徽标提示
设置 dot
属性后,会在右上角展示一个小红点;设置 badge
属性后,会在右上角展示相应的徽标。
<sf-sidebar v-model="activeKey">
<sf-sidebar-item title="标签名称" dot />
<sf-sidebar-item title="标签名称" badge="5" />
<sf-sidebar-item title="标签名称" badge="99+" />
</sf-sidebar>
禁用选项
通过 disabled
属性禁用选项。
<sf-sidebar v-model="activeKey">
<sf-sidebar-item title="标签名称" />
<sf-sidebar-item title="标签名称" disabled />
<sf-sidebar-item title="标签名称" />
</sf-sidebar>
监听切换事件
设置 change
方法来监听切换导航项时的事件。
<sf-sidebar v-model="activeKey" @change="onChange">
<sf-sidebar-item title="标签名1" />
<sf-sidebar-item title="标签名2" />
<sf-sidebar-item title="标签名3" />
</sf-sidebar>
import Notify from '@ophiuchus/notify';
export default {
data() {
return {
activeKey: 0,
};
},
methods: {
onChange(index) {
Notify({ type: 'primary', message: index });
},
},
};
API
Sidebar Props
参数 |
说明 |
类型 |
默认值 |
v-model |
当前导航项的索引 |
number | string |
0 |
Sidebar Events
事件名 |
说明 |
回调参数 |
change |
切换导航项时触发 |
index: 当前导航项的索引 |
SidebarItem Props
参数 |
说明 |
类型 |
默认值 |
title |
内容 |
string |
'' |
dot |
是否显示右上角小红点 |
boolean |
false |
badge |
图标右上角徽标的内容 |
number | string |
- |
info |
图标右上角徽标的内容(已废弃,请使用 badge 属性) |
number | string |
- |
disabled |
是否禁用该项 |
boolean |
false |
url |
点击后跳转的链接地址 |
string |
- |
to |
点击后跳转的目标路由对象,同 vue-router 的 to 属性 |
string | object |
- |
replace |
是否在跳转时替换当前页面历史 |
boolean |
false |
SidebarItem Events
事件名 |
说明 |
回调参数 |
click |
点击时触发 |
index: 当前导航项的索引 |
SidebarItem Slots
Name |
Description |
title |
自定义标题 |
样式变量
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制。
名称 |
默认值 |
描述 |
@sidebar-width |
80px |
- |
@sidebar-font-size |
@font-size-md |
- |
@sidebar-line-height |
@line-height-md |
- |
@sidebar-text-color |
@text-color |
- |
@sidebar-disabled-text-color |
@gray-5 |
- |
@sidebar-padding |
20px @padding-sm |
- |
@sidebar-active-color |
@active-color |
- |
@sidebar-background-color |
@background-color |
- |
@sidebar-selected-font-weight |
@font-weight-bold |
- |
@sidebar-selected-text-color |
@text-color |
- |
@sidebar-selected-border-width |
4px |
- |
@sidebar-selected-border-height |
16px |
- |
@sidebar-selected-border-color |
@red |
- |
@sidebar-selected-background-color |
@white |
- |