Input 輸入框

文字 / 多行輸入。支援前後綴、清空、字數統計、maxlength 截斷與表單校驗聯動。

輸入框形態

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="請輸入內容" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="前後綴圖示" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="密碼" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="唯讀" />
      <LhInput v-model="text" disabled placeholder="停用狀態" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap; align-items: center">
      <LhInput v-model="text" size="small" placeholder="small" />
      <LhInput v-model="text" size="medium" placeholder="medium" />
      <LhInput v-model="text" size="large" placeholder="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="poem" type="textarea" :rows="2" placeholder="多行文字（rows=2）" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="自適應行高" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="字數統計" />
      <LhInput v-model="text" label="浮動標籤" placeholder="與 placeholder 互斥" />
    </div>
    <p class="demo-note">當前值：{{ text || '（空）' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ text: '', secret: '', poem: '', limited: '' }),
}
</script>

Props

屬性	說明	類型	預設值
v-model	綁定值（model: modelValue/input）	string	—
type	控制項類型	'text' \| 'textarea' \| 'password' \| …	'text'
size	尺寸	'small' \| 'medium' \| 'large'	'medium'
placeholder	佔位文案，缺省用語言包	string	t('input.placeholder')
clearable	顯示清空按鈕	boolean	false
prefixIcon / suffixIcon	前後綴圖示，取內建 LhIcon 圖示名	string	—
maxlength / minlength	原生長度限制	number	—
showWordLimit	顯示字數統計（需 maxlength）	boolean	false
autosize	textarea 自適應行高	boolean \| {minRows,maxRows}	false
disabled / readonly	停用 / 唯讀	boolean	false
autofocus	掛載時自動聚焦	boolean	false
autocomplete	原生 autocomplete	string	'off'
nativeType	原生 type（type=text 時生效）	string	'text'
resize	textarea 縮放手柄方向	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	原生 name / form 屬性	string	—
tabindex	原生 tabindex	number \| string	—
inputStyle	輸入元素行內樣式	Record<string, string>	—
label	浮動標籤（與 placeholder 互斥）	string	—
themeVars / bgPattern / sx	主題覆蓋	—	—

Events

事件	說明	回呼參數
input	v-model 事件	(val, e)
change	值變化時觸發	—
focus	獲得焦點時觸發	—
blur	失去焦點時觸發	—
clear	清空時觸發	—
keydown	按鍵按下時觸發	—

表單聯動

置於 LhFormItem 內且校驗失敗時，原生控制項自動帶 aria-invalid="true"。