npm install --save vue-text-highlight
# or
yarn add vue-text-highlight
import Vue from 'vue';
import TextHighlight from 'vue-text-highlight';
Vue.component('text-highlight', TextHighlight);
// new Vue ...
<template>
<text-highlight :queries="queries">{{ description }}</text-highlight>
</template>
data() {
queries: ['birds', 'scatt'],
description: 'Tropical birds scattered as Drake veered the Jeep'
}
All available props in TextHighlight
component are:
-
queries: Array<String>|String
This prop accepts string or array of strings. If array of strings is given, it will highlight the union of matched strings.
-
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 acceptsArray
syntax,Object
syntax, or plain styling asString
. This prop will then be merged with default highlight styles inTextHighlight
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 acceptsArray
syntax,Object
syntax, or class asString
. See class binding in Vue.js.
Changes are tracked in the changelog.
vue-text-highlight is available under the MIT License.