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 }}
{ return 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.
-
[diacriticsSensitive]:
Boolean
Whether string being searched is diacritics sensitive.
-
[highlightStyle]:
Object|Array|String
Styles to be applied to highlighted
<mark>
. 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
<mark>
. Similar to class bindings in vue, it acceptsArray
syntax,Object
syntax, or class asString
. See class binding in Vue.js. -
[highlightComponent]:
Object|String
By default vue-text-highlight uses
<mark>
for the highlighting. Pass this props to override with other tag (string
) or custom component (Vue component definition).This component will be passed with two props from
text-highlight
:-
index:
Number
Index of highlighted component.
-
text:
String
Highlighted words, equals to
this.$slots.default[0].text
For more details, see example below.
-
-
Other props and listeners that are not listed above are forwarded to the highlighted component. These props will be merged with higher precendence than
index
andtext
passed fromtext-highlight
.
Advanced Usage
There might be a case where you want to do more things with the highlighted words. For that reason, vue-text-highlight supports custom component for the highlighted words. In this case, the following example alerts on click.
OtherComponent.vue
{{ description }}
;
{ return queries: 'birds' 'scatt' description: 'Tropical birds scattered as Drake veered the Jeep' MyClickableComponent foo: 'bar' ;}methods: {}
MyClickableComponent.vue
props: baz: String // From OtherComponent.vue index: Number // From TextHighlight text: String // From TextHighlight, equals to `this.$slots.default[0].text`
Changelog
Changes are tracked in the changelog.
License
vue-text-highlight is available under the MIT License.