vue-expand

Light-weight auto expanding textarea as a vue component

Install

npm install --save vue-expand
 
# or 
 
yarn add vue-expand

Usage

Add this to your vue-component:

<template>
  <div>
    <vue-expand
      v-model="text" 
      :placeholder="A placeholder" 
      :handler="handler" 
      min-row="3"/>
  </div>
</template>
 
<script>
import VueExpand from 'vue-expand'
 
export default {
  name: '..',
 
  components: {
    VueExpand
  },
 
  data () {
    return {
      text: '',
      handler: new Vue()
    }
  },
  ...
}
</script>

Options

Property	Type	Description
v-model	String	The value which is bound to the text area
min-row	Number	Minimum number of rows which results in the initial text area height
placeholder	String	The placeholder of the text area
handler	Function	Handler to access vue-expand through events

Handler Events

You can use the handler in the following way:

this.handler.$emit(event, [args])
 
// for example
this.handler.$emit('focus')

Name	Arguments	Description
focus		Focus the textarea

Styling

To style the textarea add this class somewhere in a non-scoped style-block:

<style>
  /* wrapper element */
  .vue-expand {
    ...
  }
 
  /* wrapper textarea */
  .vue-expand textarea {
    ...
  }
</style>

License

Copyright (c) 2017 Christoph Biering, Licensed under the MIT license.