docs_vue2/one/docs/components/input.md
2020-08-13 11:47:56 +08:00

2.8 KiB
Raw Blame History

Input 输入

示例

尺寸

可选的尺寸 ui 属性值:xs/s/m/l

只读状态

设置 readonly 来使输入框处于只读状态。

禁用状态

设置 disabled 来使输入框处于禁用状态。

API

属性

名称 类型 默认值 描述
ui string= - [^ui]
value string '' [^value]
disabled boolean= false 输入框是否为禁用状态。
readonly boolean= false 输入框是否为只读状态。
type string= 'text' [^type]
placeholder string= - 输入占位符。
clearable boolean= false 是否显示清除按钮。
composition boolean= false 是否感知输入法输入过程的值。
select-on-focus boolean= false 聚焦时是否自动选中输入框文本。

^^^ui 预设样式。

+++枚举值

描述
xs 超小尺寸样式。
s 小尺寸样式。
m 中尺寸样式。
l 大尺寸样式。
+++
^^^

^^^value :::badges v-model :::

输入框的值。 ^^^

^^^type 输入类型。参见原生 <input> 元素的 type

+++枚举值

描述
text 文本输入框。
password 密码输入框。
hidden 隐藏的输入框,但是值允许提交。
+++
^^^

插槽

名称 描述
before 输入框内前置内容。
after 输入框内后置内容。
placeholder 未输入时的占位内容。

:::warning 注意,插槽宽度会挤压输入框宽度。 :::

事件

名称 描述
change [^event-change]
input [^event-input]

^^^event-change 输入框内容变化时触发,即原生 change 事件触发时。回调参数为 (value, event)

+++参数详情

名称 类型 描述
value string 输入框的值。
event Event 原生 change 事件对象。
+++
^^^

^^^event-input :::badges v-model :::

有效输入时触发,受 composition 属性影响。回调参数为 (value: string)value 为输入框的 value 值。 ^^^

此外,Input 支持如下的原生事件:

auxclickclickcontextmenudblclickmousedownmouseentermouseleavemousemovemouseovermouseoutmouseupselectwheelkeydownkeypresskeyupfocusblurfocusinfocusout

回调函数的参数都为原生事件对象。

图标

名称 描述
remove 清除按钮。