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 |

Events

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

Slots

There are no slots available

License

MIT