SideBar 侧边导航栏

侧边导航栏搭配内容区，左侧 tab 与右侧内容联动。点击左侧 tab 右侧自动滚动到对应分类，右侧滚动时左侧 tab 同步高亮。

侧边导航栏组件，用于内容分类切换，配合 re-side-bar-item 使用

演示

9:41

代码示例

<!-- 展示 -->
  <re-side-bar v-model:value="activeTab" @change="onSideBarChange">
  <re-side-bar-item v-for="(cat, catIdx) in categories" :key="catIdx" :label="cat.name" :value="catIdx" :disabled="cat.disabled === true" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-side-bar />。

API

SideBar Props

名称	类型	默认值	描述	必传
value	`number \| string`	0	当前选中项的值，支持 v-model	N
defaultValue	`number \| string`	0	默认选中项的值	N
customStyle	`string`	""	自定义样式	N

SideBar Events

名称	参数	描述
change	value: number	string
click	value: number	string
update:value	value: number	string

SideBar Slots

名称	描述
default	默认插槽

SideBarItem Props

名称	类型	默认值	描述	必传
label	`string`	""	导航项标题	N
disabled	`boolean`	false	是否禁用	N
value	`number \| string`	0	导航项的值	N

Pagination 分页

分页组件，用于数据分页导航，支持显示总数、自定义文案、省略号显示

Steps 步骤条

步骤条组件，引导用户按照流程完成任务的导航条，支持水平和垂直方向

内容锚点

演示
代码示例
引入
API