Textarea 多行文字輸入框
多行文字輸入框用於輸入較長的文字內容，支援自動調整高度、字元計數等功能。
基本用法
基本的多行文字輸入框用法。
基本用法
輸入的內容：
尚未輸入內容
調整大小
可以設定 textarea 的調整大小行為。
調整大小選項
垂直調整（預設）
水平調整
雙向調整
禁止調整
自動調整高度
textarea 可以根據內容自動調整高度。
自動調整高度
自動調整高度（最小 3 行）
固定高度（對比）
字元計數
可以顯示字元計數，並限制最大輸入字元數。
字元計數
顯示字元計數（最大 100 字元）
0/100
限制字元數但不顯示計數
不同狀態
textarea 支援禁用和唯讀狀態。
不同狀態
正常狀態
禁用狀態
唯讀狀態
API
屬性
| 屬性名 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| value | 綁定值 | string | '' |
| placeholder | 占位符文字 | string | — |
| rows | 預設顯示的行數 | number | 3 |
| resize | 調整大小的方式 | 'none' | 'both' | 'horizontal' | 'vertical' | 'vertical' |
| disabled | 是否禁用 | boolean | false |
| readonly | 是否唯讀 | boolean | false |
| maxlength | 最大字元長度 | number | — |
| showWordLimit | 是否顯示字元計數 | boolean | false |
| autosize | 是否自動調整高度 | boolean | false |
事件 Events
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| update:value | 值改變時觸發 | (value: string) => void |
| input | 輸入時觸發 | (value: string) => void |
| change | 值改變且失去焦點時觸發 | (value: string) => void |
| focus | 獲得焦點時觸發 | (event: FocusEvent) => void |
| blur | 失去焦點時觸發 | (event: FocusEvent) => void |
方法 Methods
| 方法名 | 說明 | 參數 |
|---|---|---|
| focus | 使輸入框獲得焦點 | — |
| blur | 使輸入框失去焦點 | — |
| select | 選中輸入框中的文字 | — |