Input 輸入框

輸入框元件，支援文字輸入、密碼、字數統計等功能。

基礎用法

目前值:

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <!-- 基礎輸入框 -->
  <LhInput v-model="value" placeholder="请输入内容" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- 基礎輸入框 -->
  <LhInput v-model="value" placeholder="请输入内容" />
</template>

不同類型

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('已填充')
</script>

<template>
  <LhInput v-model="text" placeholder="文本输入" />
  <LhInput v-model="password" type="password" placeholder="密码输入" show-password />
  <LhInput v-model="clearable" placeholder="可清空输入" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: '已填充',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="文本输入" />
  <LhInput v-model="password" type="password" placeholder="密码输入" show-password />
  <LhInput v-model="clearable" placeholder="可清空输入" clearable />
</template>

停用狀態

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" disabled placeholder="禁用输入框" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="禁用输入框" />
</template>

字數統計

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="最多10个字" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="最多10个字" />
</template>

插槽

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

自訂主題

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- 透過 theme-vars 自訂主題變數 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="青花瓷输入框" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- 透過 theme-vars 自訂主題變數 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="青花瓷输入框" />
  </LhConfigProvider>
</template>

sx 快速版面配置

透過 sx 屬性快速設定間距，無需編寫額外 CSS。

vue

<script setup lang="ts">
</script>

<template>
  <!-- 上方間距 2 -->
  <LhInput placeholder="上方间距 2" :sx="{ mt: 2 }" />
  <!-- 水平間距 1，下方間距 3 -->
  <LhInput placeholder="水平间距 1，下方间距 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 上方間距 2 -->
  <LhInput placeholder="上方间距 2" :sx="{ mt: 2 }" />
  <!-- 水平間距 1，下方間距 3 -->
  <LhInput placeholder="水平间距 1，下方间距 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx 基於 8px 基準：mt: 2 → marginTop: 16px。完整屬性請參考 sx 快速版面配置。

國際化

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- 透過 ConfigProvider 注入語言包 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">切换语言</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- 透過 ConfigProvider 注入語言包 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">切换语言</LhButton>
  </LhConfigProvider>
</template>

尺寸與唯讀

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="只读输入框" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="只读输入框" />
</template>

前後綴圖示

透過 prefix-icon / suffix-icon 設定前後綴圖示，取內建 LhIcon 圖示名（如 search、date）。

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="前缀图标" />
  <LhInput v-model="value" suffix-icon="date" placeholder="后缀图标" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="前缀图标" />
  <LhInput v-model="value" suffix-icon="date" placeholder="后缀图标" />
</template>

原生屬性與自適應高度

autocomplete、native-type、autofocus、minlength 等原生屬性會透傳給內部輸入框；autosize 用於 textarea 根據內容自適應高度。

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="自动聚焦" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="自适应高度" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="自动聚焦" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="自适应高度" />
</template>

Input API

Props

屬性名	說明	類型	預設值
modelValue	綁定值	`string`	—
type	輸入框類型	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	停用狀態	`boolean`	`false`
readonly	唯讀狀態	`boolean`	`false`
placeholder	佔位文字	`string`	—
maxlength	最大輸入長度	`number`	—
minlength	—	`number`	—
showWordLimit	是否顯示字數統計	`boolean`	`false`
clearable	是否可清空	`boolean`	`false`
prefixIcon	前綴圖示名稱（內建 LhIcon 圖示）	`LhIconName`	—
suffixIcon	後綴圖示名稱（內建 LhIcon 圖示）	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	元件級主題變數，覆寫 ConfigProvider 設定	`{ [x: string]: string; }`	—
bgPattern	元件級背景花紋，覆寫 ConfigProvider 設定	`string`	—
sx	sx 快速版面配置屬性	`LhSxProps`	—

Events

事件名	說明	回呼參數
update:modelValue	值更新事件	`(value: string)`
input	輸入事件	`(value: string)`
change	值改變事件	`(value: string)`
focus	取得焦點事件	`(event: FocusEvent)`
blur	失去焦點事件	`(event: FocusEvent)`
clear	清空事件	—
keydown	原生 keydown 事件	`(event: KeyboardEvent)`

Slots

插槽名	說明
prefix	輸入框頭部內容
suffix	輸入框尾部內容

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/input/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Input 尺寸
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Input Props 介面
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** 前綴圖示名稱（內建 LhIcon 圖示，如 `search`） */
  prefixIcon?: LhIconName
  /** 後綴圖示名稱（內建 LhIcon 圖示，如 `date`） */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** 元件級主題變數，覆寫 ConfigProvider 設定 */
  themeVars?: Record<string, string>
  /** 元件級背景花紋，覆寫 ConfigProvider 設定 */
  bgPattern?: string
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhIconName _{（來自 @lh-ui/share/core/icon (svgs.ts)）}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Input 輸入框 ​

基礎用法 ​

不同類型 ​

停用狀態 ​

字數統計 ​

插槽 ​

自訂主題 ​

sx 快速版面配置 ​

國際化 ​

尺寸與唯讀 ​

前後綴圖示 ​

原生屬性與自適應高度 ​

Input API ​

Props ​

Events ​

Slots ​

類型定義 ​