vue-hashtag-textarea

0.3.7 • Public • Published

Highlight hashtags on Vue.js module

npm version npm download

Features

  • Highlight hastags in textarea
  • Resize textarea automatically
  • Notify inputting hashtag in realtime
  • Support japanese.
Desktop Mobile
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>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    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>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    components: {
      VueHashtagTextarea,
    },
    methods: {
      someEventTrigger() {
        this.$refs.vueHashtagTextarea.replaceHashtagNodeContent('#somehashtag ')
      }
    }
  }
</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>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    methods: {
      onChangeHashtag(obj) {
        // 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>
  import VueHashtagTextarea from 'vue-hashtag-textarea'
  export default {
    data() {
      return {
        option: {
          isEditMode: false
        }
      }
    },
    components: {
      VueHashtagTextarea,
    },
    methods: {
      onSelecthashtag(content) {
        // 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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i vue-hashtag-textarea

Weekly Downloads

0

Version

0.3.7

License

MIT

Unpacked Size

38.4 kB

Total Files

7

Last publish

Collaborators

  • mitsuyacider