Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

A simple Vue.js directive to autosize text input fields

License

Notifications You must be signed in to change notification settings

syropian/vue-input-autosize

Repository files navigation

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

About

A simple Vue.js directive to autosize text input fields

Resources

License

Stars

Watchers

Forks

Packages

No packages published