Vue.js的文本高亮笔 - vue-text-highlight

Vue.js的文本高亮笔 - vue-text-highlight
插件名称 vue-text-highlight
发布时间 2020年9月8日
插件作者 AlbertLucianto

Vue.js应用程序的简单轻量级文本突出显示器,可轻松突出显示文本中的特定字符。

变更日志:

v2.0.9(09/13/2020)

  • 支持变音符号敏感

安装和下载:

# Yarn
$ yarn add vue-text-highlight

# NPM
$ npm install vue-text-highlight --save

用法

基本用法

import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';

Vue.component('text-highlight', TextHighlight);

SomeComponent.vue

<template>
  <text-highlight :queries="queries">{{ description }}</text-highlight>
</template>
data() {
  return {
    queries: ['birds', 'scatt'],
    description: 'Tropical birds scattered as Drake veered the Jeep'
  };
}

更多的选择

TextHighlight组件中所有可用的道具是:

  • queries: Array<String|RegExp>|String|RegExp该道具接受字符串,正则表达式以及字符串或正则表达式数组。如果给出了array,它将在全局范围内突出显示匹配的字符串/正则表达式的并集。
  • [caseSensitive]: Boolean是否搜索字符串区分大小写。
  • [diacriticsSensitive]: Boolean是否搜索字符串对变音符号敏感。
  • [highlightStyle]: Object|Array|String要应用于突出显示的样式<mark>。与vue中的样式绑定类似,它接受Array语法,Object语法或普通样式作为String。然后,该道具将与TextHighlight组件中的默认突出显示样式合并。请参阅Vue.js中的样式绑定。
  • [highlightClass]: Object|Array|String要添加到突出显示的课程<mark>。与vue中的类绑定类似,它接受Array语法,Object语法或类为String请参阅Vue.js中的类绑定。
  • [highlightComponent]: Object|String默认情况下,vue-text-highlight <mark>用于突出显示。将此道具传递给其他标签(string)或自定义组件(Vue组件定义)进行覆盖。该组件将与以下两个道具一起传递text-highlight
    • index: Number高亮组件的索引。
    • text: String突出显示的单词,等于 this.$slots.default[0].text
    有关更多详细信息,请参见下面的示例
  • 上面未列出的其他道具和侦听器将转发到突出显示的组件。这些道具将以比更高的优先级合并,indextext从中传递出去text-highlight