Admin 元件
Textarea
多行文字輸入。可搭配字數限制。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/textareaimport { AdminTextarea, AdminTextareaWordLimit,} from '@/components/admin/textarea'用法
<script setup lang="ts">import { ref } from 'vue'import { AdminTextarea } from '@/components/admin/textarea'const value = ref('')</script><template> <admin-textarea v-model="value" class="w-64" placeholder="Write something..." /></template>場景
帶字數限制
<script setup lang="ts">import { ref } from 'vue'import { AdminTextarea, AdminTextareaWordLimit } from '@/components/admin/textarea'const value = ref('')</script><template> <admin-textarea v-model="value" class="w-72" placeholder="最多 120 個字" :maxlength="120"> <template #footer> <admin-textarea-word-limit /> </template> </admin-textarea></template>停用狀態
<script setup lang="ts">import { AdminTextarea } from '@/components/admin/textarea'</script><template> <admin-textarea class="w-72" model-value="這個欄位目前被停用，無法編輯。" placeholder="停用狀態" disabled /></template>錯誤狀態
<script setup lang="ts">import { ref } from 'vue'import { AdminTextarea } from '@/components/admin/textarea'const value = ref('錯誤內容')</script><template> <admin-textarea v-model="value" class="w-64" placeholder="Write something..." is-error /></template>API 參考
組成
<template> <admin-textarea v-model="value" placeholder="輸入內容" :maxlength="200"> <admin-textarea-word-limit /> </admin-textarea></template>admin-textarea
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
defaultValue | string | undefined | — | 初始值（非控制模式） |
modelValue | string | undefined | — | 受控值，以 `v-model` 綁定 |
placeholder | string | undefined | — | 預設提示文字 |
disabled | boolean | undefined | — | 設為 `true` 時禁用輸入並套用視覺停用樣式 |
maxlength | number | undefined | — | 限制最大字元數（並由 `admin-textarea-word-limit` 顯示計數） |
class | ClassValue | — | 根元素之自訂 class |
isError | boolean | undefined | false | 設為 `true` 時套用錯誤狀態樣式與 `aria-invalid` |
id | string | undefined | — | 透傳至內層 `textarea` 之 `id`；純透傳，未提供時不自動生成 |
name | string | undefined | — | 透傳至內層 `textarea` 之 `name`，供原生表單提交使用 |
Events
| 名稱 | Payload | 說明 |
|---|---|---|
blur | FocusEvent | 內層 `textarea` 失焦時轉發之原生事件 |
change | Event | 內層 `textarea` 觸發原生 `change`（值變更並 commit）時轉發之原生事件 |
input | Event | 內層 `textarea` 觸發原生 `input`（每次輸入）時轉發之原生事件 |
update:modelValue | string | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
footer | {} | — |
Expose
| 名稱 | 簽名 | 說明 |
|---|---|---|
textareaRef | HTMLTextAreaElement | null | 內部原生 textarea 元素之 template ref，可用於程式化 focus / blur / select 等操作 |
admin-textarea-word-limit
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | unknown | — | — |