From 47e326fb2a09677c77686578fe45f0ccdced7607 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:31:58 +0800
Subject: [PATCH] docs(Field): add required demo

---
 src/field/README.md                           |  4 ++-
 src/field/README.zh-CN.md                     |  6 ++--
 src/field/demo/index.vue                      |  2 ++
 .../test/__snapshots__/demo.spec.js.snap      | 33 +++++++++++++++++--
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/field/README.md b/src/field/README.md
index 635c55760..9b85daf92 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -107,12 +107,14 @@ Use `error` or `error-message` to show error info
 <van-cell-group>
   <van-field
     v-model="username"
+    error
+    required
     label="Username"
     placeholder="Username"
-    error
   />
   <van-field
     v-model="phone"
+    required
     label="Phone"
     placeholder="Phone"
     error-message="Invalid phone"
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index ed801ce40..0858ee34e 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -114,18 +114,20 @@ export default {
 
 ### 错误提示
 
-通过`error`或者`error-message`属性增加对应的错误提示
+设置`required`属性表示这是一个必填项，可以配合`error`或`error-message`属性显示对应的错误提示
 
 ```html
 <van-cell-group>
   <van-field
     v-model="username"
+    error
+    required
     label="用户名"
     placeholder="请输入用户名"
-    error
   />
   <van-field
     v-model="phone"
+    required
     label="手机号"
     placeholder="请输入手机号"
     error-message="手机号格式错误"
diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue
index e0eb55cd9..8eae764ab 100644
--- a/src/field/demo/index.vue
+++ b/src/field/demo/index.vue
@@ -67,12 +67,14 @@
       <van-cell-group>
         <van-field
           v-model="username"
+          required
           :label="$t('username')"
           :placeholder="$t('usernamePlaceholder')"
           error
         />
         <van-field
           v-model="phone2"
+          required
           :label="$t('phone')"
           :placeholder="$t('phonePlaceholder')"
           :error-message="$t('phoneError')"
diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap
index 4d2663898..2dd8a775f 100644
--- a/src/field/test/__snapshots__/demo.spec.js.snap
+++ b/src/field/test/__snapshots__/demo.spec.js.snap
@@ -41,6 +41,12 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>文本</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
+        </div>
+      </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>文本</span></div>
         <div class="van-cell__value">
@@ -51,13 +57,36 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-field van-field--error">
+      <div class="van-cell van-field">
+        <div class="van-field__left-icon"><i class="van-icon van-icon-smile-o">
+            <!----></i></div>
+        <div class="van-cell__title van-field__label"><span>文本</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="显示图标" class="van-field__control">
+            <div class="van-field__right-icon"><i class="van-icon van-icon-warning-o">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-cell van-field">
+        <div class="van-field__left-icon"><i class="van-icon van-icon-music-o">
+            <!----></i></div>
+        <div class="van-cell__title van-field__label"><span>文本</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><input type="text" placeholder="显示清除图标" class="van-field__control"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-cell--required van-field van-field--error">
         <div class="van-cell__title van-field__label"><span>用户名</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
         </div>
       </div>
-      <div class="van-cell van-field">
+      <div class="van-cell van-cell--required van-field">
         <div class="van-cell__title van-field__label"><span>手机号</span></div>
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>