【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']

まとめ

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