From ec8acc06c0d7ca055560b1075e76bcc6e0de9c33 Mon Sep 17 00:00:00 2001
From: lwl <1181102955@qq.com>
Date: Thu, 19 Aug 2021 23:55:46 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20input=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0api=E6=96=87=E6=A1=A3=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/input/src/input.scss      | 21 ++++++++-
 devui/input/src/input.tsx       | 33 +++++++------
 sites/components/input/index.md | 82 ++++++++++++++++++++++++++++++---
 3 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/devui/input/src/input.scss b/devui/input/src/input.scss
index 05d93cd7..b90b8e26 100644
--- a/devui/input/src/input.scss
+++ b/devui/input/src/input.scss
@@ -1 +1,20 @@
-@import '../../style/core/form'
+@import '../../style/core/form';
+@import '../../style/mixins/flex';
+
+.devui-input {
+  &__wrap {
+    position: relative;
+    @include flex('space-between');
+  }
+
+  &__preview {
+    position: absolute;
+    width: 32px;
+    height: 16px;
+    right: 0;
+    text-align: center;
+    line-height: 16px;
+    @include flex;
+    @include flex-direction;
+  }
+}
diff --git a/devui/input/src/input.tsx b/devui/input/src/input.tsx
index d1c2073d..46dff2ba 100644
--- a/devui/input/src/input.tsx
+++ b/devui/input/src/input.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, ref, watch, toRefs } from 'vue';
 import { inputProps } from './use-input';
 import './input.scss'
 
@@ -54,20 +54,25 @@ export default defineComponent({
       onKeydown,
       value
     } = this;
-
     return (
-      <input
-        {...{dinput: true}}
-        value={value}
-        disabled={disabled}
-        type={inputType}
-        placeholder={placeholder}
-        class={inputCls}
-        onInput={onInput}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onChange={onChange}
-        onKeydown={onKeydown} />
+      <div class="devui-input__wrap">
+        <input
+          {...{dinput: true}}
+          value={value}
+          disabled={disabled}
+          type={inputType}
+          placeholder={placeholder}
+          class={inputCls}
+          onInput={onInput}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onChange={onChange}
+          onKeydown={onKeydown} 
+        />
+        {/* <div class="devui-input__preview">
+          <d-icon name="preview" size="12px"></d-icon>
+        </div> */}
+      </div>
     );
   }
 });
diff --git a/sites/components/input/index.md b/sites/components/input/index.md
index 0ec45729..e75b0601 100644
--- a/sites/components/input/index.md
+++ b/sites/components/input/index.md
@@ -8,9 +8,79 @@
 
 ### 基本用法
 
-<h4>Default</h4>
-<d-input placeholder="Please Enter" id="textInput"></d-input>
-<h4>Disabled</h4>
-<d-input placeholder="Please Enter" :disabled="true"></d-input>
-<h4>Error</h4>
-<d-input placeholder="Please Enter" :error="true"></d-input>
+:::demo
+
+```vue
+<template>
+  <h4 style="margin: 10px 0">Default</h4>
+
+  <d-input placeholder="Please Enter" id="textInput"  class="dinput"></d-input>
+
+  <h4 style="margin: 10px 0">Disabled</h4>
+
+  <d-input placeholder="Please Enter" :disabled="true"  class="dinput"></d-input>
+
+  <h4 style="margin: 10px 0">Error</h4>
+
+  <d-input placeholder="Please Enter" :error="true"  class="dinput"></d-input>
+
+</template>
+<style>
+  .dinput {
+    width: 200px;
+  }
+</style>
+```
+
+:::
+
+### 尺寸
+
+:::demo
+
+```vue
+<template>
+  <div>
+    <h4 style="margin: 10px 0">Small</h4>
+
+    <d-input size="sm" class="dinput" placeholder="Please Enter" ></d-input>
+
+    <h4 style="margin: 10px 0">Middle</h4>
+
+    <d-input class="dinput" placeholder="Please Enter"></d-input>
+
+    <h4 style="margin: 10px 0">Large</h4>
+
+    <d-input size="lg"  placeholder="Please Enter" class="dinput"></d-input>
+
+  </div>
+</template>
+```
+
+:::
+
+
+### 密码框
+
+:::demo
+
+```vue
+<template>
+  <div>
+    <d-input class="dinput" placeholder="Please Enter" showPassword></d-input>
+  </div>
+</template>
+```
+
+:::
+
+### API
+
+|    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         | 全局配置项 |
+| :---------: | :------: | :-------: | :----------------------- | --------------------------------- | --------- |
+|    id     | `string` |    --     | 可选，文本框 id          | [基本用法](#基本用法)             ||
+|    placeholder     | `string` |  '--'   | 可选，文本框 placeholder | [基本用法](#基本用法)             ||
+|    disabled    | `boolean` | false | 可选，文本框是否被禁用           | [基本用法](#基本用法)             ||
+| error | `boolean` |  false   | 可选，文本框是否出现输入错误 | [基本用法](#基本用法) ||
+| size | `'sm'\|''\|'lg'` |  ''   | 可选，文本框尺寸，有三种选择`'lg'`,`''`,`'sm'` | [基本用法](#尺寸) ||
+
-- 
Gitee