1.0.2 • Published 3 years ago
@ophiuchus/sidebar v1.0.2
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 | - |