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 :::