Input 输入框

基础文本输入。聚焦时主色描边加光晕，支持一键清空与前后缀插槽。

基础用法

<SrInput placeholder="请输入内容…" />

双向绑定与清空

clearable 会显示一个清空按钮——禁用、只读、值为空时都不显示， 避免出现「点了没反应」的按钮。

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

<template>
  <SrInput v-model="value" clearable placeholder="输入后会出现清空按钮" />
</template>

清空后会重新聚焦，方便继续输入。

尺寸

三档离散尺寸，不使用任意值。

<SrInput size="sm" placeholder="小" />
<SrInput size="md" placeholder="中" />
<SrInput size="lg" placeholder="大" />

状态

disabled 完全不可交互；readonly 可选中复制但不能修改； invalid 用于校验失败，共三个状态色统一用危险色令牌。

<SrInput disabled placeholder="禁用" />
<SrInput readonly model-value="只读内容" />
<SrInput invalid placeholder="错误态" />

前后缀插槽

用 prefix / suffix 放图标或单位。图标建议用 size="sm"，与文字比例更协调。

个

<SrInput placeholder="搜索…">
  <template #prefix>
    <SrIcon size="sm"><svg … /></SrIcon>
  </template>
</SrInput>

<SrInput placeholder="数量">
  <template #suffix><span>个</span></template>
</SrInput>

原生 type

type 直接透传给原生 <input>。

需要数字输入时请用 SrInputNumber

type="number" 看起来够用，但它的行为在输入过程中很别扭：浏览器会把 -、1. 这类「还没输完」的内容判为无效值，读数拿到的是空串—— 用户敲减号的过程就丢了。要数字请用 SrInputNumber。

<SrInput type="password" />
<SrInput type="email" placeholder="邮箱" />

事件与方法

事件	参数	触发时机
update:modelValue	string | number	输入时
change	string	原生 change 时机（失焦或回车后）
focus / blur	FocusEvent	获得 / 失去焦点
enter	KeyboardEvent	按下回车
clear	—	点击清空按钮

通过 ref 可调用 focus() / blur() 手动控制焦点。

<script setup>
import { ref } from 'vue'

const inputRef = ref()

// 手动聚焦
inputRef.value?.focus()
</script>

<template>
  <SrInput ref="inputRef" />
</template>

Props

名称	类型	默认值	说明
id	string	—	唯一标识，同时用于关联 label
type	string	'text'	原生 type
size	'sm' | 'md' | 'lg'	'md'	尺寸
placeholder	string	''	占位文本
disabled	boolean	false	是否禁用
readonly	boolean	false	是否只读
clearable	boolean	false	是否可一键清空
invalid	boolean	false	是否处于错误态

插槽

名称	说明
prefix	输入框左侧内容（图标、单位等）
suffix	输入框右侧内容

无障碍

• 焦点指示由容器的 :focus-within 统一提供（描边加光晕）， 因此不再给内部 <input> 额外加 outline——容器整体响应才对得上 「这是一个输入控件」的视觉单元
• 配合 SrFormItem 使用时，id 会自动关联到 <label>，点标签即可聚焦