useFuse
使用 Fuse.js 组合式轻松实现模糊搜索。
来自 Fuse.js 网站的介绍：
什么是模糊搜索？
通常情况下，模糊搜索 (更正式地称为近似字符串匹配) 是一种找到与给定模式大致相等的字符串的技术 (而不是完全相等)。
示例
Roslyn Mitchell Score Index: 0
Cathleen Matthews Score Index: 1
Carleton Harrelson Score Index: 2
Allen Moores Score Index: 3
John Washington Score Index: 4
Brooke Colton Score Index: 5
Mary Rennold Score Index: 6
Nanny Field Score Index: 7
Chasity Michael Score Index: 8
Oakley Giles Score Index: 9
Johanna Shepherd Score Index: 10
Maybelle Wilkie Score Index: 11
Dawson Rowntree Score Index: 12
Manley Pond Score Index: 13
Lula Sawyer Score Index: 14
Hudson Hext Score Index: 15
Alden Senior Score Index: 16
Tory Hyland Score Index: 17
Constance Josephs Score Index: 18
Larry Kinsley Score Index: 19
将 Fuse.js 安装为对等依赖项
使用 NPM
bash
npm install fuse.js@^7使用 Yarn
bash
yarn add fuse.js使用方法
ts
import { useFuse } from '@vueuse/integrations/useFuse'
import { shallowRef } from 'vue'
const data = [
'John Smith',
'John Doe',
'Jane Doe',
'Phillip Green',
'Peter Brown',
]
const input = shallowRef('Jhon D')
const { results } = useFuse(input, data)
/*
* 结果:
*
* { "item": "John Doe", "index": 1 }
* { "item": "John Smith", "index": 0 }
* { "item": "Jane Doe", "index": 2 }
*
*/类型声明
ts
export type FuseOptions<T> = IFuseOptions<T>
export interface UseFuseOptions<T> {
fuseOptions?: FuseOptions<T>
resultLimit?: number
matchAllWhenSearchEmpty?: boolean
}
export interface UseFuseReturn<DataItem> {
fuse: Ref<Fuse<DataItem>>
results: ComputedRef<FuseResult<DataItem>[]>
}
export declare function useFuse<DataItem>(
search: MaybeRefOrGetter<string>,
data: MaybeRefOrGetter<DataItem[]>,
options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>,
): UseFuseReturn<DataItem>源码
贡献者
一纸忘忧