vue-highlights
Easy @mention, #hashtag and URL highlight for Vue 2.x
Installation
You can install via npm or yarn:
npm install --save vue-highlightsyarn add vue-highlights
And then import the component in your app:
// Install componentVue
Usage
Let's create our first component:
<template> <vue-highlights v-model="text" :extractUrlsWithoutProtocol="true" caretColor="#ccc" placeholder="My custom placeholder..." usernameClass="my-username-class" hashtagClass="my-hash-class" urlClass="my-url-class" /></template> <script> name: 'MyComponent' { return text: text }</script>
As you can see, the component accepts some props:
Prop | Type | Description |
---|---|---|
value | String | The text to highlight (v-model). |
extractUrlsWithoutProtocol | Boolean | As the name says, when active, the compoponet will try to match URLs even when a protocol (http://, https://) is not found. Defaults to true |
caretColor | String | A valid HEX color (eg. #ccc, #ff4545). |
placeholder | String | A placeholder to show when no text is entered. |
usernameClass | String | The CSS class(es) that will be added to a @username match. |
hashtagClass | String | The CSS class(es) that will be added to a #hashtag match. |
urlClass | String | The CSS class(es) that will be added to a URL match. |
The exported component (vue-highlights) renders a text input that highlights all username, hashtag and URL matches. In order to work with this input some CSS classes should be attended, here's an example:
With this we should get a working example.
As you can see when we first imported the package, 2 functions are also exported: autoLink and autoHighlight.
Both return a String value which contains our highlighted text. autoLink returns the matches found between anchor tags for links. autoHighlight returns the matches found between span tags for highlight only.
Examples
const text = 'my @username, my #hashtag and myurl.com' const autoLinked = /*autoLinked:my <a href="/users/username" title="@username" class="username-class"data-username="username">@username</a>, my <a href="/myhashtags/hashtag"title="#hashtag" class="hashtag-class" data-hashtag="hashtag">#hashtag</a>and <a href="http://myurl.com" target="_blank" class="url-class">myurl.com</a>*/ const autoHighlighted = /*autoLinked:my <span class="username-class">@username</span>, my <span class="hashtag-class">#hashtag</span> and <span class="url-class">myurl.com</span>*/
Now we can render our linked/highlighted text anywhere we like:
<template><div class="my-linked-text"> <div v-html="text"></div></div></template> <script> const rawText = 'my @username, my #hashtag and myurl.com'const autoLinked = // Uses default options name: 'MyComponent' { return text: autoLinked }</script>