UNPKG

3.26 kBMarkdownView Raw
1# vue-highlighter
2
3[![NPM version](https://img.shields.io/npm/v/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![NPM downloads](https://img.shields.io/npm/dm/vue-highlighter.svg?style=flat)](https://npmjs.com/package/vue-highlighter) [![Build Status](https://travis-ci.org/Remeic/vue-highlighter.svg?branch=master)](https://travis-ci.org/Remeic/vue-highlighter)
4[![codecov](https://codecov.io/gh/Remeic/vue-highlighter/branch/master/graph/badge.svg)](https://codecov.io/gh/Remeic/vue-highlighter)
5
6Vue directive for highlight multiple istances of a word
7
8![Example](https://media.giphy.com/media/YU7J5r4WfnLO0geruD/giphy.gif)
9
10## Install
11
12```bash
13yarn add vue-highlighter
14```
15
16CDN: [UNPKG](https://unpkg.com/vue-highlighter/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-highlighter/) (available as `window.vueHighlighter`)
17
18## Usage
19
20***
21
22### Version 1.1.2 (**Deprecated**)
23```vue
24<template>
25 <p v-highlight:word="'Alessandra'">I love Alessandra</p>
26</template>
27
28<script>
29import vueHighlighter from 'vue-highlighter'
30
31export default {
32 directives: {
33 vueHighlighter
34 }
35}
36</script>
37```
38
39***
40
41### Version 2.1.2 ( and >= )
42```vue
43<template>
44 <p v-highlight="{ word: word, live: live }" >{{ text }}</p>
45</template>
46
47<script>
48import vueHighlighter from 'vue-highlighter'
49
50export default {
51 data: () => {
52 return {
53 text: 'I love Alessandra , AlessandraGiulio',
54 word: 'Alessandra',
55 live: false,
56 }
57 },
58 directives: {
59 vueHighlighter
60 }
61}
62</script>
63```
64
65#### Option
66 **Live**: Allow to highlight word and substring, by automatically changhe the regex expression <br>
67 The live attribute is an optional attribute, is set to false by default
68 ```js
69 data: () => {
70 return {
71 text: 'I love Alessandra',
72 word: 'Alessandra',
73 live: true,
74 }
75 }
76 ```
77
78 **Color**: Allow to customize the color of text when highlighted<br>
79 The color attribute is optional and is set to #fff by default<br>
80 color can be HEX or String<br>
81
82 ```js
83 data: () => {
84 return {
85 text: 'I love Alessandra',
86 word: 'Alessandra',
87 style: {
88 color: '#ffddee'
89 }
90 }
91 }
92 ```
93
94**Background Color**: Allow to customize the background color of text when highlighted<br>
95The bgColor attribute is optional and is set to #009688 by default<br>
96bgColor can be HEX or String
97
98 ```js
99 data: () => {
100 return {
101 text: 'I love Alessandra',
102 word: 'Alessandra',
103 style: {
104 bgColor: '#ffddee'
105 }
106 }
107 }
108 ```
109
110**Padding**: Allow to customize the padding of text when highlighted<br>
111The padding attribute is optional and is set to 0px 5px by default<br>
112padding is validate if match this requirments: there is at least one number followed by one of this unit of measure ['cm','mm','in','px','pt','pc','em','ex','ch','rem','vw','vh','vmin','vmax','%']
113
114 ```js
115 data: () => {
116 return {
117 text: 'I love Alessandra',
118 word: 'Alessandra',
119 style: {
120 padding: '4rem 5%'
121 }
122 }
123 }
124 ```
125
126## Works on
127
128* Paragraph
129* Ul
130* Ol
131* Button
132* A
133
134### Contributor
135
136Thanks to [Andrea Stagi](https://github.com/astagi) to help me with troubleshooting ❤️.
137
138
139## License
140
141MIT &copy; [Giulio Fagioli](https://github.com/remeic)
142
\No newline at end of file