TextArea Autosize! https://codepan.net/gist/81e92c5af675d1db37737ceadec06794

codepan.json

{"js":{"code":"/*!\n * vue-textarea-autosize v1.1.1 \n * (c) 2019 Saymon\n * Released under the MIT License.\n */\n(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (global = global || self, global.VueTextareaAutosize = factory());\n}(this, function () { 'use strict';\n\n  //\n  //\n  //\n  //\n  //\n  //\n  //\n  var script = {\n    name: 'TextareaAutosize',\n    props: {\n      value: {\n        type: [String, Number],\n        default: ''\n      },\n      autosize: {\n        type: Boolean,\n        default: true\n      },\n      minHeight: {\n        type: [Number],\n        'default': null\n      },\n      maxHeight: {\n        type: [Number],\n        'default': null\n      },\n\n      /*\n       * Force !important for style properties\n       */\n      important: {\n        type: [Boolean, Array],\n        default: false\n      }\n    },\n    data: function data() {\n      return {\n        // data property for v-model binding with real textarea tag\n        val: null,\n        // works when content height becomes more then value of the maxHeight property\n        maxHeightScroll: false,\n        height: 'auto'\n      };\n    },\n    computed: {\n      computedStyles: function computedStyles() {\n        if (!this.autosize) return {};\n        return {\n          resize: !this.isResizeImportant ? 'none' : 'none !important',\n          height: this.height,\n          overflow: this.maxHeightScroll ? 'auto' : !this.isOverflowImportant ? 'hidden' : 'hidden !important'\n        };\n      },\n      isResizeImportant: function isResizeImportant() {\n        var imp = this.important;\n        return imp === true || Array.isArray(imp) && imp.includes('resize');\n      },\n      isOverflowImportant: function isOverflowImportant() {\n        var imp = this.important;\n        return imp === true || Array.isArray(imp) && imp.includes('overflow');\n      },\n      isHeightImportant: function isHeightImportant() {\n        var imp = this.important;\n        return imp === true || Array.isArray(imp) && imp.includes('height');\n      }\n    },\n    watch: {\n      value: function value(val) {\n        this.val = val;\n      },\n      val: function val(_val) {\n        this.$nextTick(this.resize);\n        this.$emit('input', _val);\n      },\n      minHeight: function minHeight() {\n        this.$nextTick(this.resize);\n      },\n      maxHeight: function maxHeight() {\n        this.$nextTick(this.resize);\n      },\n      autosize: function autosize(val) {\n        if (val) this.resize();\n      }\n    },\n    methods: {\n      resize: function resize() {\n        var _this = this;\n\n        var important = this.isHeightImportant ? 'important' : '';\n        this.height = \"auto\".concat(important ? ' !important' : '');\n        this.$nextTick(function () {\n          var contentHeight = _this.$el.scrollHeight + 1;\n\n          if (_this.minHeight) {\n            contentHeight = contentHeight < _this.minHeight ? _this.minHeight : contentHeight;\n          }\n\n          if (_this.maxHeight) {\n            if (contentHeight > _this.maxHeight) {\n              contentHeight = _this.maxHeight;\n              _this.maxHeightScroll = true;\n            } else {\n              _this.maxHeightScroll = false;\n            }\n          }\n\n          var heightVal = contentHeight + 'px';\n          _this.height = \"\".concat(heightVal).concat(important ? ' !important' : '');\n        });\n        return this;\n      }\n    },\n    created: function created() {\n      this.val = this.value;\n    },\n    mounted: function mounted() {\n      this.resize();\n    }\n  };\n\n  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier\n  /* server only */\n  , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\n    if (typeof shadowMode !== 'boolean') {\n      createInjectorSSR = createInjector;\n      createInjector = shadowMode;\n      shadowMode = false;\n    } // Vue.extend constructor export interop.\n\n\n    var options = typeof script === 'function' ? script.options : script; // render functions\n\n    if (template && template.render) {\n      options.render = template.render;\n      options.staticRenderFns = template.staticRenderFns;\n      options._compiled = true; // functional template\n\n      if (isFunctionalTemplate) {\n        options.functional = true;\n      }\n    } // scopedId\n\n\n    if (scopeId) {\n      options._scopeId = scopeId;\n    }\n\n    var hook;\n\n    if (moduleIdentifier) {\n      // server build\n      hook = function hook(context) {\n        // 2.3 injection\n        context = context || // cached call\n        this.$vnode && this.$vnode.ssrContext || // stateful\n        this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional\n        // 2.2 with runInNewContext: true\n\n        if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n          context = __VUE_SSR_CONTEXT__;\n        } // inject component styles\n\n\n        if (style) {\n          style.call(this, createInjectorSSR(context));\n        } // register component module identifier for async chunk inference\n\n\n        if (context && context._registeredComponents) {\n          context._registeredComponents.add(moduleIdentifier);\n        }\n      }; // used by ssr in case component is cached and beforeCreate\n      // never gets called\n\n\n      options._ssrRegister = hook;\n    } else if (style) {\n      hook = shadowMode ? function () {\n        style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));\n      } : function (context) {\n        style.call(this, createInjector(context));\n      };\n    }\n\n    if (hook) {\n      if (options.functional) {\n        // register for functional component in vue file\n        var originalRender = options.render;\n\n        options.render = function renderWithStyleInjection(h, context) {\n          hook.call(context);\n          return originalRender(h, context);\n        };\n      } else {\n        // inject component registration as beforeCreate hook\n        var existing = options.beforeCreate;\n        options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\n      }\n    }\n\n    return script;\n  }\n\n  var normalizeComponent_1 = normalizeComponent;\n\n  /* script */\n  const __vue_script__ = script;\n\n  /* template */\n  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.val),expression:\"val\"}],style:(_vm.computedStyles),domProps:{\"value\":(_vm.val)},on:{\"focus\":_vm.resize,\"input\":function($event){if($event.target.composing){ return; }_vm.val=$event.target.value;}}})};\n  var __vue_staticRenderFns__ = [];\n\n    /* style */\n    const __vue_inject_styles__ = undefined;\n    /* scoped */\n    const __vue_scope_id__ = undefined;\n    /* module identifier */\n    const __vue_module_identifier__ = undefined;\n    /* functional template */\n    const __vue_is_functional_template__ = false;\n    /* style inject */\n    \n    /* style inject SSR */\n    \n\n    \n    var TextareaAutosize = normalizeComponent_1(\n      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },\n      __vue_inject_styles__,\n      __vue_script__,\n      __vue_scope_id__,\n      __vue_is_functional_template__,\n      __vue_module_identifier__,\n      undefined,\n      undefined\n    );\n\n  var version = '1.1.1';\n\n  var install = function install(Vue) {\n    Vue.component('TextareaAutosize', TextareaAutosize);\n  };\n\n  var plugin = {\n    install: install,\n    version: version\n  };\n\n  if (typeof window !== 'undefined' && window.Vue) {\n    window.Vue.use(plugin);\n  }\n\n  return plugin;\n\n}));\n/*----End of library ----*/\nVue.use(VueTextareaAutosize);\n\n//console.log(window)\nnew Vue({\n    el: '#app',\n    data: {\n        con: `Han erbjuder betalning i Guld hur detta ska kunna hanteras är frågan just nu, 16/9 Dear Sir,\nThank you very much for your response.\nBefore we go very far let me first inform you that my clients are from Congo at the moment they don't have cash,\nthey collect gold & Diamonds from mines and these people are local miners. They keeps their money in gold and Diamonds because could be far more efficient than cash at storing wealth. ... When you account for inflation, that cash may have actually lost value\n\nSo after agree with your coming prices then he prefer payment through barter trade with gold and he will make the payment 100% with gold which will be equivalent the total invoice cost, if you accept barter trade payment we can proceed to prepare the gold which is equivalent the invoice value.\n\nNOTE:- Please see attached Assay for Gold purity test (Bars), no worries about the end user certificate and all necessary documents available. You confirm if you need photos also.\n\nrgds,\nJacob ,9/9 Har fått in nu förfrågnings specen nu pågående beräkning`\n    }\n});","transformer":"js"},"css":{"code":"","transformer":"css"},"html":{"code":"<script src=\"https://unpkg.com/[email protected]/dist/vue.js\"></script>\n<div id=\"app\">\n  <Textarea-Autosize\n        placeholder=\"Type something here...\"\n        v-model=\"con\"\n         style=\"width:100%;\"\n        :min-height=\"30\" \n                     \n      />\n</div>","transformer":"html"},"showPans":["html","js","output","console"],"activePan":"js"}