就眠儀式 46e377d5a3
update package/document-component/src/document/zh-CN/components/input.md.
Signed-off-by: 就眠儀式 <854085467@qq.com>
2022-09-22 01:14:25 +00:00

6.5 KiB

::: anchor :::

::: title 基本介绍 :::

::: describe 通过鼠标或键盘输入内容,是最基础的表单域的包装。 :::

::: title 基础使用 :::

::: demo 使用 lay-input 标签, 创建输入框。

:::

::: title 提示信息 :::

::: demo 通过 placeholder 属性, 设置输入框提示信息。

:::

::: title 前缀后缀 :::

::: demo 通过 prefixsuffix 插槽, 设置框内前置后置内容。

0 0

:::

::: title 拼接内容 :::

::: demo 通过 prependappend 插槽, 设置框外前置后置内容。

http://

:::

::: title 输入密码 :::

::: demo 通过 password 属性, 启用显示密码明文操作。

:::

::: title 设置图标 :::

::: demo 通过 prefix-iconsuffix-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 :::