witFallBar 瀑布菜单

witFallBar是一个基于 @opentiny/vue FallMenu 封装的侧边栏瀑布菜单组件，支持最多三级菜单结构，提供折叠状态、国际化、全屏切换等功能，适用于构建复杂的导航系统。

用法实例

<template>
  <div class="app-container">
    <witFallBar />
  </div>
</template>

<script lang="ts" setup>
// 组件会自动从 routesStore 获取路由数据并渲染菜单
</script>

<style>
.app-container {
  display: flex;
  height: 100vh;
}
</style>

功能特性

• 三级菜单支持：最多支持三级菜单结构，提供清晰的导航层次
• 折叠状态：支持侧边栏折叠，节省屏幕空间
• 国际化支持：内置翻译功能，支持多语言环境
• 全屏切换：支持菜单项点击时触发全屏模式
• 菜单图标：支持为菜单项配置图标
• 徽章和红点：支持菜单项显示徽章数字和红点提示
• 外部链接：支持打开外部链接，可配置新窗口打开
• 移动端适配：在移动设备上自动折叠菜单

API

属性名	类型	默认值	描述
collapse	[Boolean]	false	控制菜单是否折叠
...FallMenu.props	[Object]	-	继承 @opentiny/vue FallMenu 的所有属性

插槽

插槽名	描述	参数
level1	自定义一级菜单项渲染	slotScope：包含路由信息的对象
level2	自定义二级菜单项渲染	slotScope：包含路由信息的对象
level3	自定义三级菜单项渲染	slotScope：包含路由信息的对象数组

事件

事件名	描述	参数
...FallMenu.events	继承 @opentiny/vue FallMenu 的所有事件	-

路由配置说明

菜单数据来源于路由配置，路由对象需包含以下元信息：

属性名	类型	描述
meta.title	[String]	菜单项显示文本
meta.icon	[String]	菜单项图标名称
meta.badge	[String/Number]	菜单项徽章显示内容
meta.dot	[Boolean]	是否显示红点提示
meta.target	[String]	链接打开方式，_blank 表示新窗口打开
meta.fullscreen	[Boolean]	是否在点击时切换全屏模式
meta.levelHidden	[Boolean]	是否隐藏当前级别，直接显示子级菜单

使用提示

TIP

1. 组件依赖 routesStore 获取路由数据，需确保路由配置正确
2. 最多支持三级菜单，超出三级的菜单将不会显示
3. 组件不支持左侧点击选中功能，生产环境请谨慎使用
4. 菜单折叠状态由 settingsStore 管理，可通过设置 collapse 属性控制
5. 支持国际化翻译，菜单项文本会自动通过 translate 函数转换
6. 全屏切换功能通过 useFullscreen 实现，点击带 meta.fullscreen: true 的菜单项会触发全屏
7. 移动端设备上，点击菜单项会自动折叠菜单