SwInput

SwInput 是文本输入框：原生 <input> 的薄封装，价值在「统一基线盒子」而非功能增强——与 SwSelect 触发器同款盒模型（--control-height / --control-font-size / --input 边框 / --radius），让 SwInput / SwSelect / SwSegmented 同行混排默认等高等字号，applier 不必再手写 input 盒子样式。

未声明的原生属性（placeholder / maxlength / autocomplete / name / readonly …）与原生事件监听自动落到内层 <input> 上（inheritAttrs: false + v-bind="$attrs"），无需逐一声明——根是 .sw-input wrapper（承载盒样式与尾部图标钮），对调用方的透传行为与单根版一致。

iOS 聚焦缩放对策：iOS Safari 对 font-size < 16px 的文本输入框聚焦时会自动放大页面。SwInput 在触摸设备（hover: none + pointer: coarse）下默认字号抬回 1rem，高度不变仍 32px；显式覆盖 --sw-input-font-size 时两端同值生效。

基础用法

v-model + 原生属性透传

加载中...
<script setup lang="ts">
const keyword = ref('')
</script>

<template>
  <SwInput v-model="keyword" placeholder="搜索关键词" maxlength="50" />
</template>

配 SwFormField（错误态）

错误文案不归 SwInput——配 SwFormField 就近显示；SwInput 的 error 只管 destructive 描边 + aria-invalid：

SwFormField 简单模式 + error 描边 / 禁用

加载中...
<SwFormField label="邮箱" required :error="emailError">
  <SwInput v-model="email" type="email" :error="!!emailError" />
</SwFormField>

vee-validate 模式用 v-bind="field" 注入：

<SwFormField name="email" label="邮箱" v-slot="{ field, error }">
  <SwInput v-bind="field" type="email" :error="!!error" />
</SwFormField>

一键清除与密码可见性

clearable 在值非空时于尾部显示清除钮（清空 + 聚焦回 input + emit clear）；revealable 仅对 type="password" 生效，切换明/密文（其他 type 传了静默忽略）。两钮开启即右侧常驻留位（值出现 / 清空不挤动文本），自带触摸热区（sw-hit-area）与三语 aria-label：

clearable 清除 + revealable 密码切换

加载中...
<SwInput v-model="keyword" clearable placeholder="搜索" @clear="onCleared" />
<SwInput v-model="password" type="password" clearable revealable />

表单控件族等高混排

SwInput + SwSelect + SwSegmented 默认等高

加载中...

Props

名称类型必填默认值说明
modelValue（v-model）string | number''受控值；输入时 emit string（type="number" 亦 emit string，业务自转）
type'text' | 'password' | 'search' | 'email' | 'tel' | 'url' | 'number''text'原生 type
disabledbooleanfalse禁用态
errorbooleanfalse错误态（destructive 描边 + aria-invalid），布尔（对齐 Vuetify）；错误文案配 SwFormField 显示——SwFormField 的 error 是字符串文案，联动写 :error="!!field.error"
clearablebooleanfalse一键清除钮：值非空且未禁用时显示；点击=清空 + emit update:modelValue('') + emit clear + 聚焦回 input
revealablebooleanfalse密码明/密文切换钮，仅 type="password" 生效（其他 type 静默忽略 + dev warn）；切换只改内部显示，不改 type prop

其余原生属性一律 fallthrough 透传，无需组件声明。

Events

名称携带说明
update:modelValuevalue: string输入 / 点清除钮时触发
clear—点清除钮时触发（在 update:modelValue('') 之后）

原生事件（focus / blur / change …）经 fallthrough 直接监听即可。

样式定制 Token

Token默认值作用点
--sw-input-min-heightvar(--control-height)最小高
--sw-input-padding0.25rem 0.75rem内边距
--sw-input-bordervar(--input)描边色
--sw-input-radiusvar(--radius)圆角
--sw-input-bgvar(--background)底色
--sw-input-colorvar(--foreground)文字色
--sw-input-font-sizevar(--control-font-size)（触摸设备 1rem）字号
--sw-input-error-bordervar(--destructive)错误态描边色
--sw-input-placeholder-colorvar(--muted-foreground)placeholder 文字色

高度 / 字号默认吃表单控件族语义 token --control-height（32px）/ --control-font-size（14px）——覆盖这两个 token 全站控件同步缩放，组件级 token 优先级更高。

注意事项

  • 拿原生 DOM / 命令式聚焦：根是 wrapper（$el 不再是 <input>），走 defineExpose 的 focus() / blur() / select()：inputRef.value?.focus()。
  • 错误文案不归本组件：error 只管视觉描边，文案用 SwFormField 的 error prop / vee-validate 就近显示。
  • 多行文本不适用：本组件只封装单行 <input>；<textarea> 场景暂用原生元素（SwTextarea 形态预留、等真实需求）。
  • 表单里的提交按钮对齐：SwButton 维持零样式（不吃 --control-height），表单内按钮由业务写 height: var(--control-height) 与控件对齐。

相关