vue-textarea-autosize

Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies

Finctionality

• v-model binding in parent
• min/max height limitation
• enable/disable auto resizing dynamically

Note

• You are able to handle all native events with .native modifier read more
• You are able to use native attrs like this <textarea-autosize rows="1" ... />
• There is no CSS out of the box, so you feel free to style it as you wish

Install

Install with npm

npm i -S vue-textarea-autosize

or with yarn

yarn add vue-textarea-autosize

Add to your app

import Vue from 'vue'
import TextareaAutosize from 'vue-textarea-autosize'
 
Vue.use(TextareaAutosize)

Usage

In components

<textarea-autosize
  placeholder="Type something here..."
  ref="myTextarea"
  v-model="value"
  :min-height="30"
  :max-height="350"
  @blur.native="onBlurTextarea"
/>

Focus/blur or select content in components

this.$refs.myTextarea.$el.focus()
this.$refs.myTextarea.$el.blur()
this.$refs.myTextarea.$el.select()

Interface

Props

Props	Required	Type	Default	Description
v-model	no	String, Number	''	value binding
value	no	String, Number	''	part of the v-model binding
autosize	no	Boolean	true	allow to enable/disable auto resizing dynamically
minHeight	no	Number	null	min textarea height
maxHeight	no	Number	null	max textarea height
important	no	Boolean, Array	false	Force !important for style properties e.g. when using http://cleanslatecss.com/. Allowed values: true, false, all or some of ['resize', 'overflow', 'height']

Events

Name	Params	Description
input	value	fires on textarea content changed. part of the v-model binding. read more

Slots

There are no slots available

---

License

MIT