Vue-textarea NPM

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

textarea component vue

vue-mixins

@infinitebrahmanuniverse/nolb-vue-te @everything-registry/sub-chunk-3094 vue-materialize

8 years ago

8 years ago

8 years ago

8 years ago