Nomenclature Processing Machine
Miss any of our Open RFC calls?Watch the recordings here! »

vue-dynamic-height

1.0.2 • Public • Published

vue-dynamic-height

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

Demonstration 👀

Vue Dynamic Height Sample

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

Install

npm i vue-dynamic-height

DownloadsWeekly Downloads

7

Version

1.0.2

License

MIT

Unpacked Size

24.3 kB

Total Files

14

Last publish

Collaborators

  • avatar