突出显示文本中的单词– vue-highlight-words

突出显示文本中的单词– vue-highlight-words
插件名称 vue-highlight-words
发布时间 2020年6月3日
插件作者 Astray-git

Vue组件,用于在较大的文本正文中突出显示单词。

用法

要使用它,只需为其提供搜索词数组和要突出显示的正文即可。

<template>
  <div id="app">
    // 组件上的attrs应用于包装器 `<span>`
    <Highlighter class="my-highlight" :style="{ color: 'red' }"
      highlightClassName="highlight"
      :searchWords="keywords"
      :autoEscape="true"
      :textToHighlight="text"/>
  </div>
</template>

<script>
import Highlighter from 'vue-highlight-words'

export default {
  name: 'app',
  components: {
    Highlighter
  },
  data() {
    return {
      text: '狗在追猫。或者他们只是玩玩?',
      words: '或者'
    }
  },
  computed: {
    keywords() {
      return this.words.split(' ')
    }
  }
}
</script>

Props

属性类型需要描述
activeClassName String 要应用于活动匹配的类名称。与一起使用activeIndex
activeIndex Number 指定应突出显示的匹配索引。与一起使用activeClassName
activeStyle Object 应用于活动匹配的内联样式。与一起使用activeIndex
autoEscape Boolean searchWords在正则表达式中有意义的转义字符
caseSensitive Boolean 搜索应区分大小写;默认为false
findChunks Function 使用自定义函数搜索匹配的块。这使得在寻找匹配项时可以使用任意逻辑。有关签名,请参见Highlight-words-core中的默认findChunks功能。看一下如何使用自定义findChunks示例
HighlightClassName String CSS类名称应用于突出显示的文本
HighlightStyle Object 内联样式应用于突出显示的文本
HighlightTag String | Component 环绕突出显示的匹配项的标签类型;默认为,mark但也可以是一个组件
sanitize Function 在比较之前处理每个搜索词和文本以突出显示(例如,删除重音符号);签名(text: string): string
searchWords Object 搜索词数组。除非autoEscape设置,否则将搜索词视为RegExps 。
textToHighlight String 突出显示匹配项的文字
unhighlightClassName String CSS类名称应用于未突出显示的文本
unhighlightStyle Object 内联样式应用于未突出显示的文本

自定义突出标签

您可以通过为highlightTag道具提供组件来自定义突出显示标签。组件应该有一个<slot>供儿童使用的,然后接受道具:

Props 类型描述
HighlightIndex Number 匹配文本索引