ant-design-vue/components/input/index.zh-CN.md
2019-04-07 17:19:18 +08:00

3.2 KiB
Raw Blame History

API

Input

参数 说明 类型 默认值
addonAfter 带标签的 input设置后置标签 string|slot
addonBefore 带标签的 input设置前置标签 string|slot
defaultValue 输入框默认内容 string
disabled 是否禁用状态,默认为 false boolean false
id 输入框的 id string
prefix 带有前缀图标的 input string|slot
size 控件大小。注:标准表单内的输入框大小限制为 large。可选 large default small string default
suffix 带有后缀图标的 input string|slot
type 声明 input 类型,同原生 input 标签的 type 属性,见:MDN(请直接使用 Input.TextArea 代替 type="textarea")。 string text
value(v-model) 输入框内容 string
allowClear 可以点击清除图标删除内容 boolean

Input 事件

事件名称 说明 回调参数
change 输入框内容变化时的回调 function(e)
pressEnter 按下回车的回调 function(e)

如果 InputForm.Item 内,并且 Form.Item 设置了 idoptions 属性,则 value defaultValueid 属性会被自动设置。

Input.TextArea

参数 说明 类型 默认值
autosize 自适应内容高度,可设置为 `true false 或对象:{ minRows: 2, maxRows: 6 }` boolean|object
defaultValue 输入框默认内容 string
value(v-model) 输入框内容 string

Input.TextArea事件

事件名称 说明 回调参数
pressEnter 按下回车的回调 function(e)

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

Input.Search

参数 说明 类型 默认值
enterButton 是否有确认按钮,可设为按钮文字。该属性会与 addon 冲突。 boolean|slot false

Input.Search 事件

事件名称 说明 回调参数
search 点击搜索或按下回车键时的回调 function(value, event)

其余属性和 Input 一致。

Input.Group

参数 说明 类型 默认值
compact 是否用紧凑模式 boolean false
size Input.Group 中所有的 Input 的大小,可选 large default small string default
<a-input-group>
  <a-input />
  <a-input />
</a-input-group>

Input.Password

参数 说明 类型 默认值
visibilityToggle 是否显示切换按钮 boolean true

FAQ

为什么我动态改变 prefix/suffixInput 会失去焦点?

当 Input 动态添加或者删除 prefix/suffixVue 会重新创建 DOM 结构而新的 input 是没有焦点的。 你可以预设一个空的 <span /> 来保持 DOM 结构不变:

const suffix = condition ? <Icon type="smile" /> : <span />;

<Input suffix={suffix} />