Auto Resize Input In Vue.js – autosize-input

Description:

A small yet sometimes useful Vue.js component to auto-resize text fields depending on the content length of what you typed.

How to use it:

1. Import the autosize-input component.

import AutosizeInput from 'vue-autosize-input';

2. Add an auto-resize input to the app template.

<template>
  <autosize-input
    v-model="value" />
</template>

3. Register the component and done.

export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  }
}

4. Execute a callback when the input value changes.

<template>
  <autosize-input
    v-model="value"
    @change="onChange />
</template>
export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  },
  methods: {
    onChange (e) {
      // do something with e.target.value
    },
  },
}

Preview:

Auto Resize Input In Vue.js - autosize-input

Download Details:

Author: houjiazong

Live Demo: https://houjiazong.github.io/vue-autosize-input/

Download Link: https://github.com/houjiazong/vue-autosize-input/archive/master.zip

Official Website: https://github.com/houjiazong/vue-autosize-input

Install & Download:

# Yarn
$ yarn add vue-autosize-input

# NPM
$ npm install vue-autosize-input --save

You Might Be Interested In:

Tags:

Add Comment