From 16f16a1a84ba848b8052b15f0bc975b7d75d2fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Thu, 28 Jul 2022 10:52:14 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(component):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=20input=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/src/component/input/index.ts    |  2 +-
 .../src/document/zh-CN/components/input.md    | 83 ++++++++++++-------
 2 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/package/component/src/component/input/index.ts b/package/component/src/component/input/index.ts
index bc751ebc..a1b16342 100644
--- a/package/component/src/component/input/index.ts
+++ b/package/component/src/component/input/index.ts
@@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
 import Component from "./index.vue";
 
 const component: WithInstallType<typeof Component> = withInstall(Component);
-export default component;
+export default component;
\ No newline at end of file
diff --git a/package/document-component/src/document/zh-CN/components/input.md b/package/document-component/src/document/zh-CN/components/input.md
index ec804982..6c6f835a 100644
--- a/package/document-component/src/document/zh-CN/components/input.md
+++ b/package/document-component/src/document/zh-CN/components/input.md
@@ -10,7 +10,7 @@
 ::: title 基础使用
 :::
 
-::: demo 使用 `lay-input` 标签, 创建输入框
+::: demo 使用 `lay-input` 标签, 创建输入框。
 
 <template>
   <lay-input v-model="data1"></lay-input>
@@ -36,7 +36,7 @@ export default {
 ::: title 提示信息
 :::
 
-::: demo
+::: demo 通过 `placeholder` 属性, 设置输入框提示信息。
 
 <template>
   <lay-input placeholder="提示信息"></lay-input>
@@ -60,7 +60,7 @@ export default {
 ::: title 前缀后缀
 :::
 
-::: demo
+::: demo 通过 `prefix` 与 `suffix` 插槽, 设置框内前置后置内容。
 
 <template>
   <lay-input>
@@ -86,7 +86,7 @@ export default {
 ::: title 拼接内容
 :::
 
-::: demo
+::: demo 通过 `prepend` 与 `append` 插槽, 设置框外前置后置内容。
 
 <template>
   <lay-input v-model="inputValue">
@@ -114,7 +114,7 @@ export default {
 ::: title 输入密码
 :::
 
-::: demo
+::: demo 通过 `password` 属性, 启用显示密码明文操作。
 
 <template>
   <lay-input v-model="inputValue1" type="password" password></lay-input>
@@ -140,7 +140,7 @@ export default {
 ::: title 设置图标
 :::
 
-::: demo
+::: demo 通过 `prefix-icon` 与 `suffix-icon` 属性, 设置前置后置图标。
 
 <template>
   <lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
@@ -164,7 +164,7 @@ export default {
 ::: title 允许清空
 :::
 
-::: demo
+::: demo 通过 `allow-clear` 属性, 开启清空操作。
 
 <template>
   <lay-input :allow-clear="true" v-model="value1"></lay-input>
@@ -220,7 +220,7 @@ export default {
 ::: title 禁止输入
 :::
 
-::: demo
+::: demo 通过 `disabled` 属性, 禁止输入。
 
 <template>
   <lay-input placeholder="禁止输入" :disabled="disabled"></lay-input>
@@ -243,10 +243,32 @@ export default {
 
 :::
 
+::: title 限制长度
+:::
+
+::: demo 通过 `maxlength` 属性, 限制文本输入长度。
+
+<template>
+  <lay-input placeholder="限制内容长度" :maxlength="10"></lay-input>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 尺寸Size
 :::
 
-::: demo
+::: demo 通过 `size` 属性, 设置输入框尺寸。
 
 <template>
   <div>
@@ -267,20 +289,21 @@ export default {
 
 ::: table
 
-| 属性                     | 描述                  | 可选值         |
-| -----------------------  | -------------------- | -------------- |
-| name                     | 原始属性 name         | --             |
-| placeholder              | 提示信息              | --             |
-| disabled                 | 禁用                  | `true` `false` |
-| readonly                 | 原生属性 readonly     | `true` `false` |
-| v-model / modelValue     | 值                   | --             |
-| autofocus                | 原生属性 autofocus    | `true` `false` |
-| autocomplete             | 原生属性 autocomplete | `true` `false` |
-| allow-clear              | 允许清空 allow-clear  | `true` `false` |
-| prefix-icon              | 前置图标              | --             |
-| suffix-icon              | 后置图标              | --             |
-| password                 | 开启密码显示隐藏       | `true` `false`|
-| size                     | 尺寸       | `lg` `md` `sm` `xs`，默认`md`|
+| 属性                     | 描述                  | 类型         | 默认值         | 可选值         |
+| -----------------------  | -------------------- |-------------- |-------------- | -------------- |
+| 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`             | --             |--               |
 
 :::
 
@@ -289,13 +312,13 @@ export default {
 
 ::: table
 
-| 事件  | 描述                | 参数             |
-| ----- | ------------------- | ----------------|
-| input | 原生 input 事件     | event : Event    |
-| foucs | 原生 foucs 事件     | event : Event    |
-| blur  | 原生 blur 事件      | event : Event    |
-| change| 原生 change 事件    | event : Event    |
-| clear | 清空 事件           | --               |
+| 事件  | 描述                | 参数                        |
+| ----- | ------------------- | -------------------------- |
+| input | 原生 input 事件     | (value : `string` `number`) |
+| change| 原生 change 事件    | (value : `string` `number`) |
+| foucs | 原生 foucs 事件     | event : Event               |
+| blur  | 原生 blur 事件      | event : Event               |
+| clear | 清空 事件           | --                          |
 
 :::