Input 输入框

基础文本输入组件，支持前缀/后缀、多种尺寸、密码切换、清除按钮和字数统计。

基础用法

基础输入框

vue

<template>
  <AInput placeholder="请输入内容" />
</template>

<script setup lang="ts">
import { AInput } from '@lite-code/aui-vue'
</script>

尺寸

提供三种尺寸：sm、md（默认）、lg。

三种尺寸

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 280px">
    <AInput size="sm" placeholder="小尺寸 sm" />
    <AInput size="md" placeholder="中尺寸 md（默认）" />
    <AInput size="lg" placeholder="大尺寸 lg" />
  </div>
</template>

<script setup lang="ts">
import { AInput } from '@lite-code/aui-vue'
</script>

前缀与后缀

通过 prefix 和 suffix prop 传入文本内容，或使用 #prefix / #suffix 插槽传入自定义节点。

https://

.com

￥/月

前缀/后缀

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 280px">
    <AInput prefix="https://" placeholder="请输入域名" />
    <AInput suffix=".com" placeholder="请输入网站名" />
    <AInput prefix="￥" suffix="/月" placeholder="请输入金额" />
  </div>
</template>

<script setup lang="ts">
import { AInput } from '@lite-code/aui-vue'
</script>

密码输入

设置 type="password" 自动显示眼睛图标，可切换明文/密文，配合 clearable 同时显示清除按钮。

type=password 自动显示眼睛图标

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 280px">
    <AInput type="password" placeholder="请输入密码" />
    <AInput type="password" clearable placeholder="支持密码 + 清除" />
  </div>
</template>

<script setup lang="ts">
import { AInput } from '@lite-code/aui-vue'
</script>

允许清除

设置 clearable 属性，有内容时显示 × 清除按钮。

当前值：""

有内容时显示 × 清除按钮

vue

<template>
  <div style="width: 280px">
    <AInput v-model="val" clearable placeholder="输入内容后出现清除按钮" />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInput } from '@lite-code/aui-vue'

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

清除空格

开启 trim，失焦时自动去除内容两端空格。

当前值：""

失焦时自动 trim 两端空格

vue

<template>
  <div style="width: 280px">
    <AInput v-model="val" trim placeholder="失焦后自动去除两端空格" />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ JSON.stringify(val) }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInput } from '@lite-code/aui-vue'

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

字数统计

设置 showCount 显示当前字数；配合 maxLength 显示上限。

0

0 / 20

showCount 字数统计

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 280px">
    <AInput v-model="a" show-count placeholder="实时字数统计" />
    <AInput v-model="b" show-count :max-length="20" placeholder="最多 20 字" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInput } from '@lite-code/aui-vue'

const a = ref('')
const b = ref('')
</script>

禁用状态

禁用状态

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 280px">
    <AInput disabled placeholder="禁用状态" />
    <AInput disabled model-value="有值的禁用" />
  </div>
</template>

<script setup lang="ts">
import { AInput } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	string	—	受控值（配合 v-model 使用）
defaultValue	string	—	非受控默认值
size	'sm' | 'md' | 'lg'	'md'	输入框尺寸
type	string	'text'	原生 input type，传 password 自动显示眼睛切换
placeholder	string	—	占位文字
prefix	string	—	前缀文本（也可用 #prefix 插槽）
suffix	string	—	后缀文本（也可用 #suffix 插槽）
disabled	boolean	false	是否禁用
clearable	boolean	false	有内容时显示清除按钮
trim	boolean	false	失焦时自动去除两端空格
showCount	boolean	false	显示字数统计
maxLength	number	—	最大字符数，配合 showCount 显示上限

Events

事件名	参数	说明
update:modelValue	(value: string)	v-model 双向绑定更新
change	(value: string)	输入内容变化时触发
blur	(e: FocusEvent)	失焦时触发

Slots

插槽名	说明
prefix	自定义前缀内容
suffix	自定义后缀内容