devstark-comvue-textarea-autosize
Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies
Finctionality
v-modelbinding in parent- min/max height limitation
- enable/disable auto resizing dynamically
Note
- You are able to handle all native events with
.nativemodifier 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-autosizeor with yarn
yarn add vue-textarea-autosizeAdd 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