witSearchFunction 功能快捷搜索

witSearchFunction 是一个基于 Element Plus 树选择器实现的功能快捷搜索组件，用于在应用中快速搜索和定位路由菜单功能。组件支持水平/垂直两种布局模式，提供路由菜单的树状结构展示和快速定位功能。

用法实例

<template>
  <div>
    <!-- 垂直布局 -->
    <wit-search-function />
    
    <!-- 水平布局 -->
    <wit-search-function :is-horizontal="true" />
  </div>
</template>

<script lang="ts" setup>
// 组件会自动从路由和设置中获取数据
</script>

API

组件

<wit-search-function
  :is-horizontal="false"
/>

属性

属性名	类型	默认值	描述
isHorizontal	Boolean	false	是否使用水平布局，默认垂直布局

插槽

插槽名	描述
default	自定义树节点的显示内容

事件

事件名	描述	参数
node-click	点击树节点时触发	选中的节点数据

功能特性

1. 路由菜单树搜索

   • 基于应用路由生成树状结构
   • 支持模糊搜索和高亮显示
   • 默认展开所有树节点

2. 布局适配

   • 支持垂直和水平两种布局模式
   • 水平布局下提供白色主题样式
   • 响应式设计，适配不同屏幕尺寸

3. 国际化支持

   • 集成系统国际化翻译功能
   • 自动翻译菜单标题

4. 链接处理

   • 支持外部链接自动打开新窗口
   • 支持哈希路由和历史路由模式

5. 交互体验

   • 提供清除搜索内容功能
   • 高亮显示当前选中节点
   • 使用搜索图标作为前缀

TIP

1. 组件依赖路由配置和设置配置，需要确保应用已正确配置路由和设置存储
2. 组件会自动从routesStore获取路由数据，并从settingsStore获取主题配置
3. 支持外部链接的自动识别和处理
4. 组件的显示/隐藏受theme.showSearch配置控制