vue-highlight-text
Vue component for highlight multiple instances of a word
Installation
# with yarn
yarn add vue-highlight-text
# with npm
npm install --save vue-highlight-textUse component
import Vue from 'vue';
import HighlightText from 'vue-highlight-text';
Vue.component('HighlightText', HighlightText);Use directive
import Vue from 'vue';
import highlight from 'vue-highlight-text/public/directive.min.js';
Vue.directive('highlight', highlight);In file vue
<!-- component -->
<HighlightText :keyword="keyword" :sensitive="sensitive">{{msg}}</HighlightText>
<!-- Directive -->
<span v-highlight="{keyword: keyword}">{{msg}}</span>Props or value of directive
| Name | Type | Default | Description |
|---|---|---|---|
| keyword | string | '' | word for highlight in message. |
| sensitive | bool | true | highlight with case sensitive |
| overWriteStyle | Object | {color: '#00C1E8'} | custom highlight for overwrite style by HTML DOM Style Object |