From 6d3d976b502184529038d3a4bedf14ab151c2544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 9 Jan 2020 14:28:43 +0800
Subject: [PATCH] docs(Field): add more demos

---
 src/field/README.md       | 33 +++++++++++++++++++++++++++++++--
 src/field/README.zh-CN.md | 37 +++++++++++++++++++++++++++++++++++--
 src/field/demo/index.vue  | 34 +++++++++++++++++++++++++++++-----
 3 files changed, 95 insertions(+), 9 deletions(-)

diff --git a/src/field/README.md b/src/field/README.md
index 2abfaf402..635c55760 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -60,16 +60,45 @@ export default {
 
 ### Disabled
 
+```html
+<van-cell-group>
+  <van-field label="Text" value="Input Readonly" readonly />
+  <van-field label="Text" value="Input Disabled" disabled />
+</van-cell-group>
+```
+
+### Show Icon
+
 ```html
 <van-cell-group>
   <van-field
+    v-model="value1"
     label="Text"
-    value="Disabled"
-    disabled
+    left-icon="smile-o"
+    right-icon="warning-o"
+    placeholder="Show Icon"
+  />
+  <van-field
+    v-model="value2"
+    clearable
+    label="Text"
+    left-icon="music-o"
+    placeholder="Show Clear Icon"
   />
 </van-cell-group>
 ```
 
+```js
+export default {
+  data() {
+    return {
+      value1: '',
+      value2: '123'
+    };
+  }
+};
+```
+
 ### Error Info
 
 Use `error` or `error-message` to show error info
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index b9327b74d..ed801ce40 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -69,16 +69,49 @@ export default {
 
 ### 禁用输入框
 
+通过`readonly`将输入框设置为只读状态，通过`disabled`将输入框设置为禁用状态
+
+```html
+<van-cell-group>
+  <van-field label="文本" value="输入框只读" readonly />
+  <van-field label="文本" value="输入框已禁用" disabled />
+</van-cell-group>
+```
+
+### 显示图标
+
+通过`left-icon`和`right-icon`配置输入框两侧的图标，通过设置`clearable`在输入过程中展示清除图标
+
 ```html
 <van-cell-group>
   <van-field
+    v-model="value1"
     label="文本"
-    value="输入框已禁用"
-    disabled
+    left-icon="smile-o"
+    right-icon="warning-o"
+    placeholder="显示图标"
+  />
+  <van-field
+    v-model="value2"
+    clearable
+    label="文本"
+    left-icon="music-o"
+    placeholder="显示清除图标"
   />
 </van-cell-group>
 ```
 
+```js
+export default {
+  data() {
+    return {
+      value1: '',
+      value2: '123'
+    };
+  }
+};
+```
+
 ### 错误提示
 
 通过`error`或者`error-message`属性增加对应的错误提示
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index c87337571..e0eb55cd9 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -39,10 +39,30 @@
 
     <demo-block :title="$t('title3')">
       <van-cell-group>
+        <van-field :value="$t('inputReadonly')" :label="$t('text')" readonly />
         <van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
       </van-cell-group>
     </demo-block>
 
+    <demo-block :title="$t('showIcon')">
+      <van-cell-group>
+        <van-field
+          v-model="icon1"
+          :label="$t('text')"
+          left-icon="smile-o"
+          right-icon="warning-o"
+          :placeholder="$t('showIcon')"
+        />
+        <van-field
+          v-model="icon2"
+          clearable
+          :label="$t('text')"
+          left-icon="music-o"
+          :placeholder="$t('showClearIcon')"
+        />
+      </van-cell-group>
+    </demo-block>
+
     <demo-block :title="$t('title4')">
       <van-cell-group>
         <van-field
@@ -123,6 +143,8 @@ export default {
       number: '数字',
       message: '留言',
       sendSMS: '发送验证码',
+      showIcon: '显示图标',
+      showClearIcon: '显示清除图标',
       showWordLimit: '显示字数统计',
       textareaAutosize: '高度自适应',
       smsPlaceholder: '请输入短信验证码',
@@ -130,6 +152,7 @@ export default {
       numberPlaceholder: '请输入数字',
       phonePlaceholder: '请输入手机号',
       messagePlaceholder: '请输入留言',
+      inputReadonly: '输入框只读',
       inputDisabled: '输入框已禁用',
       phoneError: '手机号格式错误'
     },
@@ -145,6 +168,8 @@ export default {
       number: 'Number',
       message: 'Message',
       sendSMS: 'Send SMS',
+      showIcon: 'Show Icon',
+      showClearIcon: 'Show Clear Icon',
       showWordLimit: 'Show Word Limit',
       textareaAutosize: 'Auto Resize',
       smsPlaceholder: 'SMS',
@@ -152,7 +177,8 @@ export default {
       phonePlaceholder: 'Phone',
       numberPlaceholder: 'Number',
       messagePlaceholder: 'Message',
-      inputDisabled: 'Disabled',
+      inputReadonly: 'Input Readonly',
+      inputDisabled: 'Input Disabled',
       phoneError: 'Invalid phone'
     }
   },
@@ -163,6 +189,8 @@ export default {
       text: '',
       value: '',
       number: '',
+      icon1: '',
+      icon2: '123',
       password: '',
       username: '',
       username2: '',
@@ -180,9 +208,5 @@ export default {
 
 .demo-field {
   padding-bottom: 30px;
-
-  .van-field__right-icon .van-icon {
-    color: @blue;
-  }
 }
 </style>