2.0.5 • Published 7 years ago
@bitsler/vuearea-autosize v2.0.5
vuearea-autosize
A Vue component that provides textarea with automatically adjustable height and without any wrappers and dependencies
Features
v-modelbinding in parent- min/max rows limitation
- enable/disable auto resizing dynamically
- with all
@eventsemmited including native events - no dependency
- lightweight - 1.1kb Gzipped(esm) 1.46kb Gzipped(umd/browser)
Note
- You are able to handle all native events via
@eventname.nativeread more - There is no CSS from box, so you are free to style it as you wish
Install
Install with npm
npm install @bitsler/vuearea-autosize --saveor with yarn
yarn add @bitsler/vuearea-autosizeIntegration
In your main.js
import Vue from 'vue'
import VueareaAutosize from '@bitsler/vuearea-autosize'
Vue.use(VueareaAutosize)Usage
In components
<vuearea-autosize
:placeholder="Type something here..."
ref="someName"
v-model="someValue"
:min-rows="1"
:max-rows="5"
:max-length="200"
:autocomplete="on"
:spellcheck="on"
@blur="onBlurTextarea"
@blur.native="onBlurTextarea"
></vuearea-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 |
| minRows | false | Number | 1 | min textarea rows |
| maxRows | false | Number | 5 | max textarea rows |
| maxRows | false | Number | 5 | max textarea rows |
| maxLength | false | Number | 250 | max textarea length |
| autocomplete | false | String | off | enable/disalbe autocomplete |
| spellcheck | false | Boolean | false | enable/disalbe spellcheck |
| placeholder | false | String | '' | adds a placeholder to textarea |
Events
| Name | Params | Description |
|---|---|---|
| input | value | fires on textarea content changed. part of a v-model binding. read more |