diff --git a/devui/input/src/input.scss b/devui/input/src/input.scss
index 05d93cd73c9313d8f65d515426b1d59457e15653..b90b8e26b60db2dec302aac31ad3ad35d60ad6f6 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 d1c2073d70ba6541e64435729f18fc411918b9a8..46dff2ba2c9c60ef44a0c22a4860b3d821654c33 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 0ec457294f29cd5cf96a4582801af80b0628c557..e75b060142acf8e869f1e54af5b9f80539f80ad3 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'` | [基本用法](#尺寸) ||
+