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

2019年12月6日

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

vue-textarea-autosizeとは

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

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

 

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

 

環境

Vue 2.6.10
vue-textarea-autosize 1.1.1

 

インストール

以下のnpmyarnCDNを使ってインストールします。

npm

npm i -S vue-textarea-autosize

yarn

yarn add vue-textarea-autosize

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.メソッドを設定

上記で取得したVueTextareaAutosizeVue.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 を使用する場合など、スタイルプロパティを強制します。

許可される値:truefalse

または下記のように配列で一部を設定
['resize', 'overflow', 'height']

 

さいごに

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

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

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Form, UI Components, vue.js, ライブラリ
-, , ,