Vue text highlight advanced

Text highlighter for Vue.js

Version: 1.0.0 Updated: 08/22/2018

By: fagougou License: MIT

Downloads Last 30 Days: 14

Vue Text Highlight

Coverage Status Build Status Downloads Downloads Version License

See working example here.

Installation

npm install --save vue-text-highlight
# or
yarn add vue-text-highlight

Usage

Basic Usage

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

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

// new Vue ...

SomeComponent.vue

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

Output

text-highlight

More Options

All available props in TextHighlight component are:

  • queries: Array<String|RegExp>|String|RegExp

    This prop accepts string, regex, and array of strings or regex. If array is given, it will highlight the union of matched strings/regex globally.

  • [caseSensitive]: Boolean

    Whether string being searched is case sensitive.

  • [highlightStyle]: Object|Array|String

    Styles to be applied to highlighted <span>. Similar to style bindings in vue, it accepts Array syntax, Object syntax, or plain styling as String. This prop will then be merged with default highlight styles in TextHighlight component. See style binding in Vue.js.

  • [highlightClass]: Object|Array|String

    Classes to be added to highlighted <span>. Similar to class bindings in vue, it accepts Array syntax, Object syntax, or class as String. See class binding in Vue.js.

Changelog

Changes are tracked in the changelog.

License

vue-text-highlight is available under the MIT License.

Contributors



ppn029012
commits

Dependencies


DevDependencies


Categories: Vue js