vue-highlight-text
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-text
Use 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 |
Dependencies
Dependencies
babel-core: ^6.26.0babel-loader: ^7.1.2babel-preset-env: ^1.6.0babel-preset-stage-3: ^6.24.1bili: ^3.1.0cross-env: ^5.0.5css-loader: ^0.28.7file-loader: ^1.1.4rollup-plugin-vue: ^4.3.2vue-loader: ^13.0.5vue-template-compiler: ^2.4.4webpack: ^3.6.0webpack-dev-server: ^2.9.1begeta: ^1.0.0buefy: ^0.7.0highlight.js: ^9.13.1vue-embed: ^1.0.0vue-highlight-component: ^1.0.0