插件名称 | 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>
属性 | 类型 | 需要 | 描述 |
---|---|---|---|
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 | 匹配文本索引 |