This repository has been archived by the owner. It is now read-only.
A simple Vue.js directive to autosize text input fields
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
test
.babelrc
.editorconfig
.gitattributes
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
index.js
index.umd.js
karma.conf.js
package.json
rollup.config.js
vbuild.js

README.md

vue-input-autosize [DEPRECATED]

This package has been deprecated in favour of vue-input-autowidth that has support for Vue.js 2+ and a slew of bug fixes and improvements.

Build Status

A simple Vue.js directive for autosizing a text input based on its content.

Install

$ npm install vue-input-autosize --save

or include the UMD build, hosted by npmcdn in a <script> tag:

<script src="//npmcdn.com/vue-input-autosize"></script>

Usage

import Vue from "vue";
import VueInputAutosize from "vue-input-autosize";

Vue.use(VueInputAutosize, { maxWidth: 500, minWidth: 20, comfortZone: 0 });

...and inside your template:

<input type='text' :value='msg' v-input-autosize />

Why bind to value instead of using v-model?

Currently, there's no easy way to track changes to a v-model value from a directive. However, since the value property of a text field controls its content, and is also a valid parameter to watch for updates from the directive, we can dynamically bind to that instead.

License

MIT © Collin Henderson