here.
See working exampleInstallation
npm install --save vue-text-highlight# or yarn add vue-text-highlight
Usage
Basic Usage
;; Vue; // new Vue ...
SomeComponent.vue
{{ description }}
{ queries: 'birds' 'scatt' description: 'Tropical birds scattered as Drake veered the Jeep'}
Output
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 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.
Changelog
Changes are tracked in the changelog.
License
vue-text-highlight is available under the MIT License.