テキストエリア (Textarea): v-textarea
ユーザがキーボードなどで文字を入力できるコンポーネントです。同種のコンポーネントにテキストフィールドがありますが、より長い文章を入力する用途に向いています。
基本
テキストエリアは、複数行にわたる文章が入力できます。Enter キーを押しても文字入力は終了になりません(テキストフィールドは Enter キーで入力終了になる)。コンポーネントのサイズを超えて文章を入力したときは、自動的に縦方向のスクロールバーが付きます。
入力された文字列は v-model
で取得できます。
<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 を使うと、文章をクリアするボタンがコンポーネントの右側につきます。
<template>
<v-container >
<v-textarea clearable></v-textarea>
</v-container>
</template>
文章が長くなってもスクロールバーを出さない
コンポーネントのサイズを超えて文字を入力すると、デフォルトではスクロールバーが出てコンポーネントのサイズは変わりません。auto-grow
prop を使うと、入力した文章にあわせてコンポーネントが縦方向に自動的に伸びます。
文章を消すと、元のサイズに戻ります。
<template>
<v-container >
<v-textarea auto-grow></v-textarea>
</v-container>
</template>
文字数を表示する
counter
prop を使うと、入力された文字数が右下に表示されます。
<template>
<v-container >
<v-textarea label="counter" counter></v-textarea>
</v-container>
</template>
外観 (variant)
コンポーネントの外観は variant
props を指定することでいくつか選べます。
<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
で指定します。
<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
の併用は可能です。
<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-icon
prop を使うと、コンポーネントの左、右にアイコンを設置できます。
<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
と同じ文字列が入ってきます。そのため、直前に入力された文字を知りたい場合は、直前の文字列と差分を取るなどの工夫が必要になります。
<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
詳細については、公式ドキュメントを参照してください。