Input 输入框

何时使用

• 需要用户输入表单域内容时。
• 提供组合型输入框，带搜索的输入框，还可以进行大小选择。

代码演示

基本使用

loading

三种大小

loading

形态变体

loading

前置/后置标签

loading

紧凑模式

loading

搜索框

loading

搜索框 loading

loading

文本域

loading

适应文本高度的文本域

loading

一次性密码框

loading

输入时格式化展示

loading

前缀和后缀

loading

密码框

loading

带移除图标

loading

带字数提示

loading

定制计数能力

loading

自定义状态

loading

聚焦

loading

自定义各种语义结构的样式和类

loading

API

Input

参数	说明	类型	默认值	版本
addonAfter	带标签的 input，设置后置标签	VNode	-
addonBefore	带标签的 input，设置前置标签	VNode	-
allowClear	可以点击清除图标删除内容	boolean |	-
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-	5.4.0
count	字符计数配置	CountConfig	-	5.10.0
disabled	是否禁用状态，默认为 false	boolean	false
id	输入框的 id	string	-
maxlength	最大长度	number	-
prefix	带有前缀图标的 input	VNode	-
showCount	是否展示字数	boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => VNode }	false	4.18.0 info.value: 4.23.0
status	设置校验状态	'error' | 'warning'	-	4.19.0
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-	5.4.0
size	控件大小。注：标准表单内的输入框大小限制为 middle	large | middle | small	-
suffix	带有后缀图标的 input	VNode	-
type	声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 Input.TextArea 代替 type="textarea")	string	text
value(v-model)	输入框内容	string	-
variant	形态变体	outlined | borderless | filled | underlined	outlined	5.13.0 | underlined: 5.24.0
onChange	输入框内容变化时的回调	function(e)	-
onPressEnter	按下回车的回调	function(e)	-
onClear	按下清除按钮的回调	() => void	-	5.20.0

CountConfig

interface CountConfig {
  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
  max?: number;
  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
  strategy?: (value: string) => number;
  // 同 `showCount`
  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => VNode);
  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
  exceedFormatter?: (value: string, config: { max: number }) => string;
}

Input.TextArea

同 Input 属性，外加：

Input.TextArea 的其他属性和浏览器自带的 textarea 一致。

Input.Search

<!--	参数	说明	类型	默认值
classNames	语义化结构 class	Record<SemanticDOM, string>	-
enterButton	是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。	VNode	false
loading	搜索 loading	boolean	false
onSearch	点击搜索图标、清除图标，或按下回车键时的回调	function(value, event, { source: "input" | "clear" })	-
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-

其余属性和 Input 一致。

Input.Password

Input.OTP

5.16.0 新增。

开发者注意事项：

当 mask 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。

VisibilityToggle

Property	Description	Type	Default	Version
visible	用于手动控制密码显隐	boolean	false	4.24
onVisibleChange	显隐密码的回调	(visible) => void	-	4.24

Input Methods

名称	说明	参数	版本
blur	取消焦点	-
focus	获取焦点	(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })	option - 4.10.0