vue-dynamic-height

A light weight Vue plugin to let the height of your textarea component dynamic.

Demonstration 👀

How to 🤔

npm install --save vue-dynamic-height

Use locally 📍

<template>
  <textarea v-dynamic-height></textarea>
</template>

<script>
import dynamicHeight from 'vue-dynamic-height';

export default {
  name: MySampleTextareaComponent,
  directives: {
    dynamicHeight,
  },
};
</script>

Use globally 🌐

import Vue from 'vue';
import { installVueDynamicHeight } from 'vue-dynamic-height';

Vue.use(installVueDynamicHeight);

API 🔌

Config options

Prop	Required	Default	Type	Description
disabled	No	false	Boolean	It disables the directive behavior.
minHeight	No	'0px'	String	Defines style a minimum height for textarea input

Usage

Simple one

<template>
  <textarea v-dynamic-height></textarea>
</template>

Custom setup

<template>
  <textarea v-dynamic-height="{ disabled: false, minHeight: '100px' }"></textarea>
</template>

Turn height calc reactive

It might not not be the most beautiful way to do it, but it seems to be a good and efficient way.

The point is just trigger an native input event every time the value prop updates.

<template>
  <textarea
    ref="textarea"
    :value="value"
    @input="onInput"
    v-dynamic-height></textarea>
</template>

<script>
import DynamicHeight from 'vue-dynamic-height';

export default {
  name: 'MyTextareaComponent',
  directives: {
    DynamicHeight,
  },
  props: {
    value: String,
  },
  watch: {
    value() {
      this.triggerEventToDynamicHeight();
    },
  },
  methods: {
    triggerEventToDynamicHeight() {
      this.$nextTick(() => {
        this.$refs.textarea.dispatchEvent(new Event('input'));
      });
    },
    onInput(event) {
      this.$emit('input', event.target.value);
    },
  },
};
</script>

Contribution 🚀

Want to contribute? Feel free to open up an issue and/or a pull request here. 🙂

At first, install all dependencies.

npm install

To run all tests, please run it.

npm test

To build you result, just do it.

npm run build

Note ℹ️

To play with your result, you might run the command npm pack to generate a compressed .tgz file. So far, you can install it within your own project and test it as long as you wish.

For example, browse your terminal to your own project repository path and run a command like this below:

npm install --save ../vue-dynamic-height/vue-dynamic-height-1.0.1.tgz

License 📜

MIT