美文网首页
vue模糊查询插件fuse.js的使用

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

作者: blueskirt | 来源:发表于2022-04-16 13:07 被阅读0次

    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 = []
          }
    }
    

    相关文章

      网友评论

          本文标题:vue模糊查询插件fuse.js的使用

          本文链接:https://www.haomeiwen.com/subject/rrocertx.html