vue模糊查询插件fuse.js的使用

2022-04-16  本文已影响0人  blueskirt

Fuse.js是一个功能强大、轻量级的模糊搜索库,没有依赖关系。简单使用步骤如下:

  1. 安装fuse.js插件。
npm install --save fuse.js
  1. 在vue页面中引入:
import Fuse from 'fuse.js'
  1. 在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
       }]
  })
  1. 在需要模糊查询时调用fuse.search:
querySearch(query) {
      if (query !== '') {
        this.options = this.fuse.search(query)
      } else {
        this.options = []
      }
}
上一篇下一篇

猜你喜欢

热点阅读