Vue directive textarea autoheight

v-textarea-autoheight.js

// <textarea rows="3" v-textarea-autoheight></textarea>

const textareaAutoheight = {
  autoHeight(el) {
    el.style.height = "auto"; // Revert height
    const style = window.getComputedStyle(el);
    const borderTop = parseFloat(style.getPropertyValue("border-top-width"));
    const borderBottom = parseFloat(style.getPropertyValue("border-bottom-width"));
    el.style.height = el.scrollHeight + borderTop + borderBottom + "px";
  },
  mounted(el, binding) {
    el.style.overflowY = "hidden";
    el.style.resize = "none";
    el.style.boxSizing = "border-box";

    el.__autoHeightHandler__ = () => binding.dir.autoHeight(el);
    el.addEventListener('input', el.__autoHeightHandler__);
  },
  beforeUnmount(el) {
    el.removeEventListener('input', () => el.__autoHeightHandler__);
  },
};