【Vue.js】vue-textarea-autosizeで改行に合わせて高さを変えてくれるテキストエリアを実装

#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.プロパティ

|Props|Required|Type|Default|Description|
|:--|:--:|:--:|:--:|:--:|--:|
|v-model|no|String, Number|''|値のバインディング|
|value|no|String, Number|''|v-modelバインディングの一部|
|autosize|no|Boolean|true|自動サイズ変更を動的に有効/無効にすることができます|
|minHeight|no|Number|null|最小テキストエリアの高さ（反応的な動作）|
|maxHeight|no|Number|null|最大テキストエリアの高さ（反応的な動作）|
|important|no|Boolean, Array|false|http://cleanslatecss.com/!important　を使用する場合など、スタイルプロパティを強制します。許可される値：true、falseまたは下記のように配列で一部を設定['resize', 'overflow', 'height']|

#まとめ

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