SideBar 侧边导航

侧边导航栏，用于在不同的内容区域之间进行切换。

导入

import SideBar from '@/components/nav/SideBar.vue';
import SideBarItem from '@/components/nav/SideBarItem.vue';

使用方法

基础用法

SideBar 组件需要与 SideBarItem 组件配合使用，通过 v-model 绑定选中的条目。

<template>
  <SideBar v-model="value">
    <SideBarItem name="first" text="选项1" />
    <SideBarItem name="second" text="选项2" />
    <SideBarItem name="third" text="选项3" />
    <SideBarItem name="fourth" text="选项4" />
  </SideBar>
</template>

<script setup>
import { ref } from 'vue';
import SideBar from '@/components/nav/SideBar.vue';
import SideBarItem from '@/components/nav/SideBarItem.vue';

const value = ref('first');
</script>

徽标提示

通过 SideBarItem 的 badge 属性可以添加徽标提示，支持数字、红点等形式。

<template>
  <SideBar v-model="value">
    <SideBarItem name="first" text="选项1" />
    <SideBarItem name="second" text="选项2" :badge="-1" /> <!-- 红点提示 -->
    <SideBarItem name="third" text="选项3" :badge="50" /> <!-- 数字提示 -->
    <SideBarItem name="fourth" text="选项4" :badge="100" :badgeProps="{ maxCount: 99 }" /> <!-- 自定义最大值 -->
  </SideBar>
</template>

禁用选项

通过 SideBarItem 的 touchable 属性可以禁用特定选项，使其不可点击。

<template>
  <SideBar v-model="value">
    <SideBarItem name="first" text="选项1" />
    <SideBarItem name="second" text="选项2" :touchable="false" />
    <SideBarItem name="third" text="选项3" :touchable="false" />
    <SideBarItem name="fourth" text="选项4" />
  </SideBar>
</template>

监听切换事件

通过监听 SideBar 的 clickItem 事件，可以在用户切换选项时执行自定义逻辑。

<template>
  <SideBar v-model="value" @clickItem="onItemClick">
    <SideBarItem name="first" text="选项1" />
    <SideBarItem name="second" text="选项2" />
    <SideBarItem name="third" text="选项3" />
    <SideBarItem name="fourth" text="选项4" />
  </SideBar>
</template>

<script setup>
import { ref, watch } from 'vue';

const value = ref('first');

watch(value, (newValue, oldValue) => {
  console.log('选中项目更改', newValue);
});
function onItemClick(name) {
  console.log('用户点击了', name);
}
</script>

API 参考

SideBar

SideBar Props

名称	说明	类型	必填	默认值
v-model	选中的条目名称	string | number	否	''
activeColor	选中文字颜色	string	否	'primary'
inactiveColor	未选中文字颜色	string	否	'text.title'
disableColor	禁用文字颜色	string	否	'text.second'
activeStyle	选中时条目的样式	object	否	{}
inactiveStyle	未选中时条目的样式	object	否	{}
activeBadgeStyle	选中时条目左侧的标记的样式	object	否	{}
textStyle	标签文字样式	object	否	{}
innerStyle	自定义外层样式	object	否	{}

SideBar Events

名称	说明	参数
update:modelValue	选中项变化时触发	name: string | number
clickItem	点击菜单项时触发	name: string | number

SideBar Slots

名称	说明
default	侧边栏内容，通常放置 SideBarItem 组件
background	背景内容插槽

SideBarItem

SideBarItem Props

名称	说明	类型	必填	默认值
name	标签名称，必填，请保证组件内不重复	string | number	是	-
text	标签文字	string	否	-
touchable	是否可以点击	boolean	否	true
badge	标签标记。为 0 或者 未定义时不显示，为 -1时显示圆点，为大于0的数时显示数字标记	number	否	undefined
badgeProps	自定义徽标的属性，传入的对象会被透传给 Badge 组件的 props	object	否	{}
textStyle	标签文字样式	object	否	{}
innerStyle	自定义标签样式	object	否	{}

SideBarItem Slots

名称	说明
text	自定义渲染文字内容

主题变量

名称	类型	默认值	说明
SideBarItemTextFontSize	number	28	侧边栏文字大小
SideBarItemPaddingVertical	number	36	侧边栏项垂直内边距
SideBarItemPaddingHorizontal	number	30	侧边栏项水平内边距
SideBarItemActiveBackgroundColor	string	'white'	选中项背景颜色
SideBarItemInactiveBackgroundColor	string	'light'	未选中项背景颜色
SideBarItemActiveBadgeBackgroundColor	string	'primary'	选中标记背景颜色
SideBarItemActiveBadgeLeft	number	0	选中标记左侧位置
SideBarItemActiveBadgeTop	string	'50%'	选中标记顶部位置
SideBarItemActiveBadgeMarginTop	number	-15	选中标记上外边距
SideBarItemActiveBadgeHeight	number	30	选中标记高度
SideBarItemActiveBadgeWidth	number	8	选中标记宽度