Input 輸入框
Input 輸入框組件用於接收用戶的文本輸入，支持多種功能如清除按鈕、前綴後綴插槽等。
基本使用
最基本的文本輸入框用法。
Current Value:
可清除內容
設置 clearable 屬性後，當輸入框內容不為空時，鼠標懸浮會顯示清除按鈕。
禁用狀態
設置 disabled 屬性可以禁用輸入框。
前綴與後綴插槽
通過 prefix 和 suffix 插槽可以在輸入框內添加圖標或其它內容。
Prefix Slot
Suffix Slot
Both Slots
Press Enter
API
屬性
| 屬性名 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| modelValue | 綁定值 | string | number | '' |
| disabled | 是否禁用 | boolean | false |
| clearable | 是否顯示清空按鈕 | boolean | false |
| placeholder | 輸入框佔位文本 | string | '' |
| type | 輸入框類型 | string | 'text' |
| readonly | 是否只讀 | boolean | false |
| autocomplete | 自動完成屬性 | string | 'off' |
| maxlength | 最大輸入長度 | number | — |
| showWordLimit | 是否顯示輸入字數統計 | boolean | false |
事件
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| update:modelValue | 當輸入值改變時觸發 | value: string |
| input | 當輸入值改變時觸發 | value: string |
| change | 當輸入值改變時觸發（失去焦點時） | value: string |
| focus | 當輸入框獲得焦點時觸發 | event: FocusEvent |
| blur | 當輸入框失去焦點時觸發 | event: FocusEvent |
| clear | 當點擊清空按鈕時觸發 | — |
插槽
| 插槽名 | 說明 |
|---|---|
| prefix | 輸入框前綴內容 |
| suffix | 輸入框後綴內容 |
方法
| 方法名 | 說明 | 參數 |
|---|---|---|
| focus | 使輸入框獲得焦點 | — |
| blur | 使輸入框失去焦點 | — |
| select | 選中輸入框中的文本 | — |