突出显示文本中的单词– 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 | 匹配文本索引 |