Input 输入框
用于表单中的文本输入,支持类型选择、错误提示、禁用、聚焦、选中等常用交互能力。支持双向绑定。
基础用法
默认 type 为 text, 可通过 type 设置为 textarea。
数字输入框
TsInputNumber 支持 min/max/step/precision 与 controlsPosition 配置。
密码输入框
可通过 type 设置为 password。
一键清空
使用 clearable 属性即可得到一个可一键清空的输入框。
前后缀图标插槽
通过 prefix-icon/suffix-icon 插槽添加图标或交互元素。
不同尺寸
通过 size 属性可设置输入框尺寸,支持 small 、medium 、large 、x-large 四种预设值。 若不传入则默认使用 medium 尺寸。
输入框样式:Outline 风格
使用 outline 属性可开启轮廓风格的输入框样式,通常用于页面视觉较轻的场景。
带底部提示的密码输入框
支持自定义插槽内容,通过 #content-bottom 插槽可在输入框下方显示辅助提示信息,例如密码强度说明、格式要求等。 搭配 type="password" 类型使用,可构建更完整的表单交互体验。
带验证码按钮的输入框
通过 #suffix 插槽可在输入框内部右侧插入自定义内容,适用于放置按钮、图标、头像、验证码图片等。 本示例展示了在输入框右侧嵌入"获取验证码"按钮,适用于手机号或邮箱验证码输入场景。
属性 Props
text / password / textarea / number
small / medium / large / x-large
null / true / false / string
文本域是否允许用户调整尺寸(textarea 时生效)
null / true / false / string
文本域是否允许用户调整尺寸(textarea 时生效)
事件 Events
(e: 'input', val: any): void;
(e: 'blur', val: any): void;
(e: 'change', val: any): void;