witColumnBar 列布局侧边栏

witColumnBar 是一个基于 Element Plus 封装的列布局侧边栏组件，支持多种主题样式、折叠功能和路由导航，提供灵活的侧边栏布局解决方案。组件使用标签页（Tabs）和菜单（Menu）组合实现，支持响应式设计，可根据需求自定义样式和行为。

用法实例

<template>
  <witColumnBar />
</template>

<script lang="ts" setup>
// 组件会自动使用全局路由配置和设置状态
</script>

API

属性

属性名	类型	默认值	描述
无	-	-	组件内部从全局状态获取配置，无需手动传入属性

插槽

插槽名	描述
无	组件内部结构已固定，不提供外部插槽

事件

事件名	描述	参数
...ElTabs.events	继承 Element Plus Tabs 的所有事件	-
...ElMenu.events	继承 Element Plus Menu 的所有事件	-

主题样式

组件支持多种列布局样式，通过 theme.columnStyle 配置：

• vertical：垂直样式
• horizontal：水平样式
• card：卡片样式
• arrow：箭头样式
• semicircle：半圆样式

功能特性

TIP

1. 路由集成：自动与 Vue Router 集成，支持路由导航和外部链接
2. 多种主题：提供垂直、水平、卡片、箭头和半圆五种主题样式
3. 响应式设计：适配不同设备尺寸，支持移动端显示
4. 折叠功能：支持侧边栏折叠/展开操作
5. 动态菜单：根据路由配置动态生成菜单项
6. 粘性定位：首页菜单项支持粘性定位，始终保持可见
7. 自定义图标：支持自定义菜单项图标

组件会自动从全局设置状态中获取主题配置，无需手动传入。可通过设置 route.meta.noColumn 来控制特定页面是否显示侧边栏。