Chapter 32無料公開

テキストエリア (Textarea): v-textarea

超Lチカ団編集局
超Lチカ団編集局
2023.10.08に更新

テキストエリア (Textarea): v-textarea

ユーザがキーボードなどで文字を入力できるコンポーネントです。同種のコンポーネントにテキストフィールドがありますが、より長い文章を入力する用途に向いています。

基本

テキストエリアは、複数行にわたる文章が入力できます。Enter キーを押しても文字入力は終了になりません(テキストフィールドは Enter キーで入力終了になる)。コンポーネントのサイズを超えて文章を入力したときは、自動的に縦方向のスクロールバーが付きます。

入力された文字列は v-model で取得できます。

sample.gif

<template>
  <v-container >
    <v-textarea v-model="text"></v-textarea>    

    <div>
      {{ text }}
    </div>
  </v-container>
</template>
<script>
export default {
  data () {
    return {
      text: '',
    }
  },
}
</script>

全部消すボタンを付ける

clearable props を使うと、文章をクリアするボタンがコンポーネントの右側につきます。

sample.gif

<template>
  <v-container >
    <v-textarea clearable></v-textarea>
  </v-container>
</template>

文章が長くなってもスクロールバーを出さない

コンポーネントのサイズを超えて文字を入力すると、デフォルトではスクロールバーが出てコンポーネントのサイズは変わりません。auto-grow prop を使うと、入力した文章にあわせてコンポーネントが縦方向に自動的に伸びます。

文章を消すと、元のサイズに戻ります。

sample.gif

<template>
  <v-container >
    <v-textarea auto-grow></v-textarea>
  </v-container>
</template>

文字数を表示する

counter prop を使うと、入力された文字数が右下に表示されます。

sample.gif

<template>
  <v-container >
    <v-textarea label="counter" counter></v-textarea>
  </v-container>
</template>

外観 (variant)

コンポーネントの外観は variant props を指定することでいくつか選べます。

sample.gif

<template>
  <v-container >
    <v-row>
      <v-col>
        <v-textarea label="default"></v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="outlined" variant="outlined"></v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="underlined" variant="underlined"></v-textarea>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-textarea label="solo" variant="solo"></v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="solo-filled" variant="solo-filled"></v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="solo-inverted" variant="solo-inverted"></v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>

サイズの設定

テキストエリアの高さは rows を使って行数で指定します。幅は他のコンポーネントと同様に class="w-50" などとして class で指定します。

sample.gif

<template>
  <v-container >
    <v-textarea label="rows:2" rows="2"></v-textarea>
    <v-textarea label="rows:3 / class:w-50" rows="3" class="w-50"></v-textarea>
  </v-container>
</template>

色の設定

color prpos でコンポーネントに文字を入力しているときの枠の色を、bg-color props でコンポーネントの背景色を設定できます。

class="text-xxx" のようにするとテキストの色が変更されますが、背景色にも影響を与えます。class="bg-xxx" とすると、bg-color を使う場合と色の付き方が変わります。

なお、class による色の指定と color, bg-color の併用は可能です。

sample.gif

<template>
  <v-container >
    <v-row>
      <v-col>
        <v-textarea color="blue" label="color:blue" >
        </v-textarea>
      </v-col>
      <v-col>
        <v-textarea bg-color="red" label="bg-color:red" >
        </v-textarea>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-textarea color="blue" label="color:blue / text-red" class="text-red" >
        </v-textarea>
      </v-col>
      <v-col>
        <v-textarea color="blue" label="color:blue / bg-red" class="bg-red">
        </v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>

アイコンの設置

prepend-icon, prepend-inner-icon, append-icon, append-inner-iconprop を使うと、コンポーネントの左、右にアイコンを設置できます。

sample.gif

<template>
  <v-container >
    <v-row>
      <v-col>
        <v-textarea label="prepend-icon" prepend-icon="mdi-home">
        </v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="prepend-inner-icon" prepend-inner-icon="mdi-home">
        </v-textarea>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-textarea label="append-icon" append-icon="mdi-home">
        </v-textarea>
      </v-col>
      <v-col>
        <v-textarea label="append-inner-icon" append-inner-icon="mdi-home">
        </v-textarea>
      </v-col>
    </v-row>
  </v-container>
</template>

値が変更されたときのイベントの取得

@update:modelValue を使うことで、文字が入力されたタイミングでメソッドの呼び出しができます。メソッドに渡される引数には、v-model と同じ文字列が入ってきます。そのため、直前に入力された文字を知りたい場合は、直前の文字列と差分を取るなどの工夫が必要になります。

sample.gif

<template>
  <v-container >
    <v-textarea @update:modelValue="updated" v-model="text"></v-textarea>
    v-model:<pre>{{text}}</pre>
    arg:<pre>{{output}}</pre>
  </v-container>
</template>
<script>
export default {
  data () {
    return {
      text: '',
      output: '',
    }
  },
  methods: {
    updated(arg){
      this.output = arg;
    }
  }
}
</script>

その他

テキストエリアは v-slot を使うことで、細かくカスタマイズが可能です。たとえば、下記の v-slot が使えます。

  • prepend: テキスト入力欄の左側に置かれる要素
  • prepend-inner: テキスト入力欄の内側の左側部分に固定で置かれる要素
  • label: ラベルの代わりに置かれる要素
  • append: テキスト入力欄の右側に置かれる要素
  • append-inner: テキスト入力欄の内側の右側部分に固定で置かれる要素
  • counter: カウンターの代わりに使う要素
  • clear: 文字列を消去するボタンの代わりに使う要素

また、他の form 系のコンポーネントと同様に、以下の props が使えます。

  • 無効化: disable
  • 変更不可: read-only

詳細については、公式ドキュメントを参照してください。