2.0.5 • Published 5 years ago

@bitsler/vuearea-autosize v2.0.5

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

vuearea-autosize

npm npm vue2

A Vue component that provides textarea with automatically adjustable height and without any wrappers and dependencies

Features

  • v-model binding in parent
  • min/max rows limitation
  • enable/disable auto resizing dynamically
  • with all @events emmited 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.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/vuearea-autosize --save

or with yarn

yarn add @bitsler/vuearea-autosize

Integration

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

PropsRequiredTypeDefaultDescription
autosize        falseBoolean     trueallow to enable/disable auto resizing dynamically
minRowsfalseNumber1min textarea rows
maxRowsfalseNumber5max textarea rows
maxRowsfalseNumber5max textarea rows
maxLengthfalseNumber250max textarea length
autocompletefalseStringoffenable/disalbe autocomplete
spellcheckfalseBooleanfalseenable/disalbe spellcheck
placeholderfalseString''adds a placeholder to textarea

Events

NameParamsDescription
inputvaluefires on textarea content changed. part of a v-model binding. read more

License

MIT