Skip to content
πŸ”¦ Vue component for highlight multiple instances of a word
Vue JavaScript HTML
Branch: master
Clone or download
Latest commit a523769 Jan 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
images
src
.babelrc
.editorconfig
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
bili.config.js
index.html
package-lock.json 1.6.2 Jan 5, 2019
package.json
webpack.config.js simple but not yet build Apr 24, 2018

README.md

vue-highlight-text

NPM version NPM downloads Build Status

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
You can’t perform that action at this time.