Vue 3 Global Search

一个优雅的可拖拽全局搜索组件，适用于 Vue 3 应用。

特性

• 🎯 全局浮动按钮，可拖拽定位
• 🔍 智能搜索功能
• 🎨 流畅的动画效果
• 💾 搜索历史记录
• ⌨️ 键盘快捷键支持 (Ctrl+K / Cmd+K)

安装

npm install global-search-component

// 默认导入
import GlobalSearch from 'global-search-component'

// 或者命名导入
import { GlobalSearch } from 'global-search-component'

基础配置

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | dataSource | Array | [] | 静态数据源 | | httpConfig | Object | {} | HTTP 请求配置 | | searchDelay | Number | 800 | 搜索延迟时间（毫秒） | | buttonSize | Number | 50 | 按钮大小（像素） | | buttonMargin | Number | 50 | 按钮边距（像素） | | buttonColor | String | #409eff | 按钮背景颜色 | | primaryColor | String | #409eff | 主要颜色（用于边框、文字等） | | placeholder | String | 输入关键词搜索... | 搜索框占位符 | | title | String | 智能搜索 | 对话框标题 | | maxHistoryCount | Number | 10 | 最大历史记录数 |

数据格式

// dataSource 数据格式
const dataSource = [
  {
    id: 1,                    // 唯一标识
    title: 'Vue 3 官方文档',    // 标题
    description: 'Vue 3 官方文档和指南', // 描述
    url: 'https://vuejs.org',  // 外部链接
    link: '/docs/vue'          // 内部链接
  }
]

HTTP 配置

// httpConfig 配置格式
const httpConfig = {
  url: '/api/search',          // 请求地址（必需）
  method: 'GET',               // 请求方法，默认 GET
  headers: {                   // 请求头
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  },
  params: {                    // 请求参数
    type: 'document'
  }
}

示例说明

静态数据

<template>
  <GlobalSearch 
    :dataSource="searchData"
    :buttonColor="#ff6b6b"
    :primaryColor="#ff6b6b"
    :placeholder="搜索文档、页面..."
    :title="文档搜索"
    @select="handleSelect"
    @search="handleSearch"
  />
</template>

<script setup>
import GlobalSearch from 'global-search-component'

const searchData = [
  {
    id: 1,
    title: 'Vue 3 官方文档',
    description: 'Vue 3 官方文档和指南',
    url: 'https://vuejs.org'
  }
]

const handleSelect = (result) => {
  console.log('选择了:', result)
  
  // 处理链接跳转
  if (result.url) {
    window.open(result.url, '_blank')
  } else if (result.link) {
    router.push(result.link)
  }
}

const handleSearch = (query) => {
  console.log('搜索关键词:', query)
}
</script>

使用 HTTP 请求

<template>
  <GlobalSearch 
    :httpConfig="httpConfig"
    :buttonSize="60"
    :buttonColor="#10b981"
    @select="handleSelect"
  />
</template>

<script setup>
import GlobalSearch from 'global-search-component'

const httpConfig = {
  url: '/api/search',
  method: 'POST',
  headers: {
    'Authorization': 'Bearer your-token'
  }
}

const handleSelect = (result) => {
  console.log('选择了:', result)
}
</script>