vue-textarea-autosize

Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies
456,868 124
vue vuejs plugin textarea size autosize height auto
Install
npm install vue-textarea-autosize
Latest Version:1.1.1
Vue:2
License:MIT
Last Updated:Oct 26, 2023
Links: GitHub  ·  npm
Maintainer: saymon

vue-textarea-autosize

npm npm vue2

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

Related Packages

v-autosize

Lightweight Vue wrapper for `autosize`

207,568 17
autosize height textarea vue adjust directive
vue-autosize

autosize for vue directive

87,909
autosize textarea vue directive
auto-textarea

基于Vue的自适应高度的文本输入框

3,050 26
auto textarea vue javascript
vue-auto-draggable

An element-dragable plug-in based on Vue3.3

551 3
auto plugin draggable vue3
vue-screen-size

Get easy and reactive access to the width and height of your screen.

67,033 45
height size vue screen width

Version History

Version Released License
1.1.1 MIT
1.1.0 MIT
1.0.4 MIT
1.0.3 MIT
1.0.2 MIT