#vue-textarea-autosizeとは
vue-textarea-autosizeは、改行に合わせて高さを変えてくれるテキストエリアが実装できるコンポーネントライブラリです。

最大の高さを設定するれば、それ以降はスクロールバーに切り替えてくれる機能もあります。

#vue-js-modalの導入方法
以下のnpm、CDNを使ってインストールします。

npm

npm i -S vue-textarea-autosize

yarn

yarn add vue-textarea-autosize

CDN

<script src="https://cdn.jsdelivr.net/npm/vue-textarea-autosize@1.1.1/dist/vue-textarea-autosize.umd.min.js"></script>

#導入手順

###1.ライブラリの取り込み

import VueTextareaAutosize from 'vue-textarea-autosize'
Vue.use(VueTextareaAutosize);

###2.メソッドを設定

export default {
  data() {
    return {
      value: "", //任意名
      },
    },
 }

###3. テンプレートを準備

<div class="profile-contens flex">
   <textarea-autosize name="text" cols="10" rows="1" v-model="selfpr" placeholder="自己紹介" :min-height="70" :max-height="70"></textarea-autosize>
</div>

###4.プロパティ

#まとめ

改行に合わせて高さを変えてくれるテキストエリアが実装できるコンポーネントライブラリでした。