Input 输入框

输入框组件允许用户通过键盘输入内容，是最基础的表单控件，常用于各种表单场景。

API

Props

参数	说明	类型	默认值
modelValue / v-model	输入值	string | number	—
type	输入类型	'text' | 'password' | 'number' | 'tel' | 'email' | 'url'	'text'
placeholder	输入框占位符	string	—
size	输入框大小	'small' | 'medium' | 'large'	'medium'
status	输入框状态	'success' | 'warning' | 'error'	—
disabled	输入框是否禁用	boolean	false
readonly	输入框是否只读	boolean	false
clearable	输入框是否可清除	boolean	false
maxLength	输入框最大长度	number | string	—

Events

事件名	说明	参数
update:modelValue	在输入值变化时触发	(value: string | number) => void
change	仅在输入框失去焦点或用户按下回车时触发	(value: string | number, evt: Event) => void
input	在输入值变化时触发	(value: string | number, evt: Event) => void
focus	在输入框获得焦点时触发	(evt: FocusEvent) => void
blur	在输入框失去焦点时触发	(evt: FocusEvent) => void
clear	在点击清除按钮时触发	() => void

Slots

插槽名	说明
prefix	前缀图标
suffix	后缀图标
prepend	前置内容
append	后置内容
clearIcon	清除按钮图标

基础用法

基础的输入框用法，通过v-model进行双向绑定。

输入框尺寸

提供三种尺寸的输入框，通过size属性控制。

输入框状态

输入框可以有不同的状态，包括禁用、只读以及成功、警告、错误状态。

可清除输入框

设置clearable属性可以使输入框在有内容时显示清除按钮。

带图标的输入框

可以通过插槽添加前缀图标或后缀图标。

复合型输入框

可以在输入框前后添加其他内容。

不同类型的输入框

通过type属性可以使用不同类型的输入框。

限制输入长度

使用maxLength属性可以限制输入框的最大输入长度。

TypeScript

import type { ComponentSize, ComponentType } from '../types/basic';

export interface InputProps {
  modelValue?: string | number;
  type?: "text" | "password" | "number" | "tel" | "email" | "url";
  placeholder?: string;
  size?: ComponentSize; // "small" | "medium" | "large"
  status?: Extract<ComponentType, "success" | "warning" | "error">;
  disabled?: boolean;
  readonly?: boolean;
  clearable?: boolean;
  maxLength?: number | string;
}