vue模糊查询插件fuse.js的使用
2022-04-16 本文已影响0人
blueskirt
Fuse.js是一个功能强大、轻量级的模糊搜索库,没有依赖关系。简单使用步骤如下:
- 安装fuse.js插件。
npm install --save fuse.js
- 在vue页面中引入:
import Fuse from 'fuse.js'
- 在vue生命周期钩子mounted或者在依赖发生改变时调用initFuse:
initFuse(list) {
this.fuse = new Fuse(list, {
shouldSort: true,
threshold: 0.4,
location: 0,
distance: 100,
maxPatternLength: 32,
minMatchCharLength: 1,
keys: [{
name: 'title',
weight: 0.7
}, {
name: 'path',
weight: 0.3
}]
})
- 在需要模糊查询时调用fuse.search:
querySearch(query) {
if (query !== '') {
this.options = this.fuse.search(query)
} else {
this.options = []
}
}