/vue-search-highlight

Vue搜索高亮组件

Primary LanguageVue

vue-search-highlight

组件需要传入文本content以及关键词keyword，组件会渲染出一个包含content并且关键词被font元素替换的div元素。
组件功能如下：

  • 关键词高亮
  • 关键词匹配总数以及当前关键词的索引（即是第几个搜索结果）
  • 查找上一个、下一个功能，调用相应函数即可跳到上一个或者下一个

使用方法：

  1. 安装组件，使用npm或者yarn 
          
        // 如果使用yarn yarn add vue-search-highlight // 如果使用npm npm add vue-search-highlight​
  2. 引入
    vue-search-highlight本身是一个组件，在需要搜索高亮的页面里引入后，像正常的组件一样使用即可。 
          
        import SearchHighlight from 'vue-search-highlight' // 注册为子组件 components:
        { 'search-highlight': SearchHighlight },​
  3. props
    props 说明 备注
    content 需要展示的文本，搜索即在这个文本中进行。
    keyword 关键词
    highlightStyle 关键词高亮的CSS样式 非必传，参照浏览器搜索，默认设置背景为黄色#ffff00
    currentStyle 当前关键词高亮的CSS样式 非必传， 参照浏览器搜索，默认设置背景为橘黄色#ff9632
     
  4. events
    组件有两个重要的数据，即搜索匹配数量和当前关键词索引，会通过$emit弹射出来，如果需要展示搜索索引和匹配总数（比如 3 / 16），你可以监听组件的这两个事件：
    事件名 返回值
    ＠current-change 返回值：当前关键词索引。
    关键词改变的时候，如果搜索到内容，会返回1，搜索不到则返回0。
    ＠mactch-count-change 返回值：文本匹配关键词总数。
  5. methods
    你可以通过ref引用组件，直接调用组件内部的一些方法：
    方法名 参数 说明
    searchNext 无 下一个关键词滚动到可视区域
    searchLast 无 上一个关键词滚动到可视区域
    scrollTo index 滚动到第index（从1开始）个关键词

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint