Vue textarea

a advanced textarea

Version: 1.0.0 Updated: 09/17/2016

By: vue-comps License: MIT

Downloads Last 30 Days: 125

vue-textarea

a autoresizing textarea.

Demo

Install

npm install --save-dev vue-textarea

or include build/bundle.js.

Usage

# in your component
components:
  "vc-textarea": require("vue-textarea")
# or, when using bundle.js
components:
  "vc-textarea": window.vueComps.textarea
<vc-textarea>Content
  <span slot="placeholder">A placeholder</span>
</vc-textarea>

see dev/ for examples.

Props

Name type default description
value String textContent of slot (two-way) content of the textarea
taclass VueClass [] class of the textarea
style VueStyle [] style of the wrapper div
autofocus Boolean false autofocus
disabled Boolean false disabled
readonly Boolean false readonly
no-extra-line Boolean false doesn't add the extra empty line on resize
size Object {height:offsetHeight,width:offsetWidth} size of the closed textarea
max-size Object {height:Number.MAX_VALUE,width:this.size.width} size of the opened textarea
hover-size Object {height:this.size.height,width:this.size.width} size of the closed textarea on hover
is-opened Boolean false (two-way) set to open / close (will open on focus and close on blur)
transition-in Function no animation animation for increasing size. Argument: {el,style,cb}
transition-out Function no animation animation for reducing size. Argument: {el,style,cb}

Events

focus, blur, keyup will pass-through

Name description
before-enter will be called before open animation
after-enter will be called when opened
before-leave will be called before close animation
after-leave will be called when closed
input will be emitted when value changed

Changelog

  • 1.0.0
    events are renamed after vue transitions
    added unit tests
    bugfixes

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js