6.5 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 通过鼠标或键盘输入内容,是最基础的表单域的包装。 :::
::: title 基础使用 :::
::: demo 使用 lay-input
标签, 创建输入框。
:::
::: title 提示信息 :::
::: demo 通过 placeholder
属性, 设置输入框提示信息。
:::
::: title 前缀后缀 :::
::: demo 通过 prefix
与 suffix
插槽, 设置框内前置后置内容。
:::
::: title 拼接内容 :::
::: demo 通过 prepend
与 append
插槽, 设置框外前置后置内容。
:::
::: title 输入密码 :::
::: demo 通过 password
属性, 启用显示密码明文操作。
:::
::: title 设置图标 :::
::: demo 通过 prefix-icon
与 suffix-icon
属性, 设置前置后置图标。
:::
::: title 允许清空 :::
::: demo 通过 allow-clear
属性, 开启清空操作。
:::
::: title 事件回调 :::
::: demo
:::
::: title 禁止输入 :::
::: demo 通过 disabled
属性, 禁止输入。
:::
::: title 限制长度 :::
::: demo 通过 maxlength
属性, 限制文本输入长度。
:::
::: title 尺寸Size :::
::: demo 通过 size
属性, 设置输入框尺寸。
:::
::: title Input 属性 :::
::: table
属性 | 描述 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
name | 原始属性 name | string |
-- | -- |
placeholder | 提示信息 | string |
-- | -- |
disabled | 禁用 | boolean |
false |
true false |
readonly | 原生属性 readonly | boolean |
false |
true false |
v-model / modelValue | 值 | string number |
-- | -- |
autofocus | 原生属性 autofocus | boolean |
false |
true false |
autocomplete | 原生属性 autocomplete | boolean |
false |
true false |
allow-clear | 允许清空 allow-clear | boolean |
false |
true false |
prefix-icon | 前置图标 | -- | -- | 内置 icon 集 |
suffix-icon | 后置图标 | -- | -- | 内置 icon 集 |
password | 开启密码显示隐藏 | boolean |
false |
true false |
size | 尺寸 | string |
md |
lg md sm xs |
maxlength | 限制输入长度 | number |
-- | -- |
:::
::: title Input 事件 :::
::: table
事件 | 描述 | 参数 |
---|---|---|
input | 原生 input 事件 | (value : string number ) |
change | 原生 change 事件 | (value : string number ) |
focus | 原生 focus事件 | event : Event |
blur | 原生 blur 事件 | event : Event |
clear | 清空 事件 | -- |
:::
::: title Input 事件 :::
::: table
事件 | 描述 | 参数 |
---|---|---|
prefix | 输入框前置内容 | -- |
suffix | 输入框后置内容 | -- |
prepend | 输入框前置内容 (更) | -- |
append | 输入框后置内容 (更) | -- |
:::
::: contributor input :::
::: previousNext input :::