Highlight hashtags on Vue.js module
Features
- Highlight hastags in textarea
- Resize textarea automatically
- Notify inputting hashtag in realtime
- Support japanese.
Desktop | Mobile |
---|---|
Getting started
Download
Via npm
$ npm install vue-hashtag-textarea --save
Usage
ES6 modules
import VueHashtagTextarea from 'vue-hashtag-textarea';
Vue file
import VueHashtagTextarea from '/path/to/vue-hashtag-textarea.vue';
Hello world
<template> <div class="container"> <vue-hashtag-textarea /> <div> </template> <script> components: VueHashtagTextarea </script>
Options
Options | Type | Description | Default |
---|---|---|---|
defaultContent | String | insert initial text | '' |
textColor | String | ordinary text color | black |
font | String | wave height | 14px "Noto Sans Japanese", sans-serif |
hashtagBackgroundColor | String | background color on hashtag | transparent |
hashtagColor | String | hashtag color | #ff0000 |
placeholder | String | placeholder on empty | Sentence for placeholder #place #holder |
isEditMode | Boolean | true: enable to edit but cannot select hashtag false: enable to select hashtag but cannot edit |
true |
Supported Functions
replaceHashtagNodeContent(content)
Argument
- content : String
Description
Replace focused hashtag to new hashtag. Please note that the content shouled include hashtag "#" at the head of the word. In addition, if the caret in the textarea is not on one of hashtags, no hashtag is replaced.
Example
<template> <div class="container"> <vue-hashtag-textarea ref="vueHashtagTextarea" /> <div> </template> <script> components: VueHashtagTextarea methods: { this$refsvueHashtagTextarea } </script>
Callback
onChangeHashtag(obj)
Argument
- obj : Object
Values | Type | Description |
---|---|---|
target | String | focusing hashtag |
hashtags | Array | hashtag list in the sentence |
Description
Everytime hashtags is inputed in vue-hashtag-textarea, values including whole hashtags and current focusing hashtag will be notified by this callback function. If caret is not at hashtag, this callback doesn't be fired.
Example
<template> <div class="container"> <vue-hashtag-textarea v-on:onChangeHashtag="onChangeHashtag" /> <div> </template> <script> methods: { // NOTE: Everytime hashtags is inputed in vue-hashtag-textarea, // values will be callbacked in this scope } </script>
onSelectHashtag(content)
Argument
- content : String
Description
When hashtag element is selected, this callback function will be fired with the specific hashtag.
Example
<template> <div class="container"> <vue-hashtag-textarea :option=option v-on:onSelectHashtag="onSelectHashtag" /> <div> </template> <script> { return option: isEditMode: false } components: VueHashtagTextarea methods: { // TODO: } </script>
Browser support
Desktop
Chrome | Safari | IE / Edge | Firefox | Opera |
---|---|---|---|---|
72+ | 12+ | ? | 65+ | ? |
Mobile
Android webview | Chrome for Android | Safari on iOS | Edge Mobile | Firefox for Android | Opera for Android | Samsung Internet |
---|---|---|---|---|---|---|
? | ? | 12+ | ? | ? | ? | ? |
NOTE
If debugging iOS devices on chrome dev tools, the layout will be failed. In that case, recommend to use Safari browser instead.
Quick Start
git clone https://github.com/mitsuyacider/vue-hashtag-textarea
cd vue-hashtag-textarea
npm install
vue serve example/App.vue