@bitsler/vue-area-autosize NPM

vue-area-autosize

A Fork of vue-textarea-autoresize with fixes and optimizations. This is a Vue component that 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
with @input.native and @change.native events

Note

You are able to handle all native events via @eventname.native read more
There is no CSS from box, so you are free to style it as you wish

Install

Install with npm

npm install @bitsler/vue-area-autosize --save

or with yarn

yarn add @bitsler/vue-area-autosize

Adding into app

In your main.js

import Vue from 'vue'
import VueAreaAutosize from '@bitslervue-area-autosize'

Vue.use(VueAreaAutosize)

Usage

In components

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

Focus/blur or select content in components

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

Interface

Props

Props	Required	Type	Default	Description
autosize	false	Boolean	true	allow to enable/disable auto resizing dynamically
minHeight	false	Number	null	min textarea height
maxHeight	false	Number	null	max textarea height