Appearance
拼音检索 Hooks:usePinyinSearch
usePinyinSearch 提供原文 / 全拼 / 首字母三维匹配的列表检索:输入 zs 或 zhangsan 都能命中 张三。拼音转换器由业务注入(推荐 pinyin-pro),组件库保持零字典依赖;转换结果按原文缓存,长列表重复检索不重复转换。
基本用法
ts
import { pinyin } from 'pinyin-pro'
import { usePinyinSearch } from 'vue3-ep-biz-lib'
const members = ref([{ id: 1, name: '张三' }, { id: 2, name: '李四' }])
const { keyword, results } = usePinyinSearch({
list: members,
getter: (m) => m.name,
pinyinOf: (text) => pinyin(text, { toneType: 'none' }), // 全拼:zhangsan
initialsOf: (text) => pinyin(text, { pattern: 'first', toneType: 'none' }), // 首字母:zs
})
// keyword 绑定输入框;results 为命中列表(keyword 为空时全量)1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
不注入转换器时退化为纯文本包含匹配(match 仍可用)。
API
usePinyinSearch(options)
| 属性 | 类型 | 说明 |
|---|---|---|
| list | MaybeRefOrGetter<T[]> | 待检索列表(响应式源) |
| getter | (item: T) => string | 取项匹配文本(默认 String(item)) |
| pinyinOf | (text: string) => string | 全拼转换注入(缺省不参与) |
| initialsOf | (text: string) => string | 首字母转换注入(缺省不参与) |
返回
| 成员 | 类型 | 说明 |
|---|---|---|
| keyword | Ref<string> | 检索关键词(v-model 输入框) |
| results | ComputedRef<T[]> | 命中列表(关键词为空时全量) |
| match | (item: T) => boolean | 单项命中判定(树 / 表格自行过滤时用) |