Input
文本 / 数字 / 密码输入控件。没有 Reka 对应物——原生 <input> 的输入行为本身跨平台一致,需要统一的只是外观;唯一例外是 number 的步进器,各系统绘制不同,这里直接藏掉。
高度与按钮、下拉共用 --ui-control-height,同一行天然等高。标签、提示、错误状态和规则都由外层 XField 负责。
基础
密码显隐
type="password" 默认自带显隐按钮。showPasswordIcon / hidePasswordIcon 或 #password-icon 只覆盖图标渲染,按钮、ARIA 文案和切换行为仍由组件持有;v-model:password-visible 可让上层读取或控制状态。需要完全自定义后缀与行为时,关闭 password-toggle 后使用 #append。
前后缀
框内从左到右是 prepend 区 / prefix 文字 / 输入值 / suffix 文字 / append 区:prefix / suffix 紧贴输入值(¥、kg),prepend / append 放图标或按钮(有同名插槽,也有 prepend-icon / append-icon 简写),清空与密码显隐排在 append 之后。结构是扁平的——根节点就是那个框,传给它的 class 能直接改边框、底色、高度与内边距;框外要放东西由宿主自己排布局。
外观
variant 三档:outline 描边(默认,表单页)、filled 填充(编辑器面板里一格挨一格的字段)、ghost 幽灵(浮动工具条里)。XTextarea / XSelect / XCombobox 同一套;整棵子树的默认外观用 XConfigProvider 设。
状态
在 XField 内使用时,错误边框、聚焦环和 aria-invalid 由字段状态自动下派:
邮箱格式不对
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | "number" | "search" | "text" | "password" | "email" | "url" | "date" | "datetime-local" | undefined | "text" | — |
placeholder | string | undefined | undefined | — |
disabled | boolean | undefined | false | — |
readonly | boolean | undefined | false | — |
clearable | boolean | undefined | false | — |
prefix | string | undefined | undefined | — |
suffix | string | undefined | undefined | — |
prependIcon | string | undefined | undefined | — |
appendIcon | string | undefined | undefined | — |
passwordToggle | boolean | undefined | true | password 类型默认显示显隐按钮;关闭后可用 suffix 插槽完全接管 |
showPasswordIcon | string | undefined | "ph:eye" | — |
hidePasswordIcon | string | undefined | "ph:eye-slash" | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
variant | FieldVariant | undefined | undefined | — |
modelValue | string | number | undefined | — | — |
passwordVisible | boolean | undefined | false | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: string | number | undefined] | — |
update:passwordVisible | [value: boolean] | — |
Slots
| 插槽 | 说明 |
|---|---|
prepend | — |
append | — |
password-icon | — |