忘れないように記録しとこ

カバの樹

改行に合わせて高さが変わるテキストエリア「vue-textarea-autosize」

2019年12月6日

完全版を表示する

vue-textarea-autosizeとは

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

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

 

 

環境

Vue 2.6.10
vue-textarea-autosize 1.1.1

 

インストール

以下のnpm、yarn、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>

 

gitリポジトリは以下から取得できます。

https://github.com/devstark-com/vue-textarea-autosize

 

導入手順

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

（1）webpack等の場合 [注意]モジュール版は未検証です。

import VueTextareaAutosize from 'vue-textarea-autosize'

（2）WEBページの場合

const VueTextareaAutosize = window.VueTextareaAutosize;

2.メソッドを設定

上記で取得したVueTextareaAutosizeを Vue.use プロパティに取り込みます。

Vue.use(VueTextareaAutosize);

new Vue({
  el: '#app',
  data: {
    value: ''
  }
});

3. テンプレートを準備

上記で取得したコンポーネントを配置します。

<textarea-autosize> を設置します。
プロパティについては、該当の項目をご確認ください。

 

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <textarea-autosize
    placeholder="Type something here..."
    ref="myTextarea"
    v-model="value"
    :min-height="70"
    :max-height="250"
  ></textarea-autosize>
</div>

 

サンプル

>>専用ページで確認する

 

プロパティ

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

 

さいごに

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

サンプルのGifで分かるように早速実装しました。
地味に役に立つ機能です。

 

今日はこの辺でー

 

  • B!