From 8a0f7ff3f08c8b4308a0c3768df0bb0662009068 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 29 Jul 2021 10:21:56 +0800
Subject: [PATCH] docs: improve Form demo (#9149)

---
 src/address-edit/AddressEdit.tsx              |  3 +--
 .../test/__snapshots__/demo.spec.ts.snap      |  6 ++---
 .../test/__snapshots__/index.spec.js.snap     | 24 +++++++------------
 src/form/README.md                            |  8 +++----
 src/form/README.zh-CN.md                      |  8 +++----
 src/form/demo/FieldTypeArea.vue               |  2 +-
 src/form/demo/FieldTypeCalendar.vue           |  2 +-
 src/form/demo/FieldTypeDatetimePicker.vue     |  2 +-
 src/form/demo/FieldTypePicker.vue             |  2 +-
 src/form/test/__snapshots__/demo.spec.ts.snap |  8 +++++++
 src/picker/README.md                          |  2 +-
 src/picker/README.zh-CN.md                    |  2 +-
 src/picker/demo/index.vue                     |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  2 ++
 14 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/address-edit/AddressEdit.tsx b/src/address-edit/AddressEdit.tsx
index f549932aa..ede35a4fa 100644
--- a/src/address-edit/AddressEdit.tsx
+++ b/src/address-edit/AddressEdit.tsx
@@ -355,8 +355,7 @@ export default defineComponent({
               v-show={props.showArea}
               readonly
               label={t('area')}
-              clickable={!disableArea}
-              rightIcon={!disableArea ? 'arrow' : undefined}
+              is-link={!disableArea}
               modelValue={areaText.value}
               placeholder={props.areaPlaceholder || t('areaPlaceholder')}
               errorMessage={errorInfo.areaCode}
diff --git a/src/address-edit/test/__snapshots__/demo.spec.ts.snap b/src/address-edit/test/__snapshots__/demo.spec.ts.snap
index 4abc8bf4d..23beab81a 100644
--- a/src/address-edit/test/__snapshots__/demo.spec.ts.snap
+++ b/src/address-edit/test/__snapshots__/demo.spec.ts.snap
@@ -50,12 +50,10 @@ exports[`should render demo and match snapshot 1`] = `
                    readonly
                    placeholder="Area"
             >
-            <div class="van-field__right-icon">
-              <i class="van-badge__wrapper van-icon van-icon-arrow">
-              </i>
-            </div>
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-field van-address-edit-detail">
         <div class="van-cell__title van-field__label">
diff --git a/src/address-edit/test/__snapshots__/index.spec.js.snap b/src/address-edit/test/__snapshots__/index.spec.js.snap
index fa8081191..599de63f4 100644
--- a/src/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/src/address-edit/test/__snapshots__/index.spec.js.snap
@@ -55,12 +55,10 @@ exports[`should render AddressEdit correctly 1`] = `
                  readonly
                  placeholder="Area"
           >
-          <div class="van-field__right-icon">
-            <i class="van-badge__wrapper van-icon van-icon-arrow">
-            </i>
-          </div>
         </div>
       </div>
+      <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      </i>
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
@@ -142,12 +140,10 @@ exports[`should render AddressEdit with props correctly 1`] = `
                  readonly
                  placeholder="Area"
           >
-          <div class="van-field__right-icon">
-            <i class="van-badge__wrapper van-icon van-icon-arrow">
-            </i>
-          </div>
         </div>
       </div>
+      <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+      </i>
     </div>
     <div class="van-cell van-field van-address-edit-detail">
       <div class="van-cell__title van-field__label">
@@ -270,15 +266,13 @@ exports[`should valid area code and render error message correctly 1`] = `
              readonly
              placeholder="Area"
       >
-      <div class="van-field__right-icon">
-        <i class="van-badge__wrapper van-icon van-icon-arrow">
-        </i>
-      </div>
     </div>
     <div class="van-field__error-message">
       Please select a receiving area
     </div>
   </div>
+  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+  </i>
 </div>
 `;
 
@@ -299,12 +293,10 @@ exports[`should valid area code and render error message correctly 2`] = `
              readonly
              placeholder="Area"
       >
-      <div class="van-field__right-icon">
-        <i class="van-badge__wrapper van-icon van-icon-arrow">
-        </i>
-      </div>
     </div>
   </div>
+  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+  </i>
 </div>
 `;
 
diff --git a/src/form/README.md b/src/form/README.md
index 5e8a2674c..f15b2361f 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -318,8 +318,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="picker"
   label="Picker"
   placeholder="Select city"
@@ -364,8 +364,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="datetimePicker"
   label="Datetime Picker"
   placeholder="Select time"
@@ -407,8 +407,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="area"
   label="Area Picker"
   placeholder="Select area"
@@ -454,8 +454,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="calendar"
   label="Calendar"
   placeholder="Select date"
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index f0b444275..a84c5fadd 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -345,8 +345,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="picker"
   label="选择器"
   placeholder="点击选择城市"
@@ -393,8 +393,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="datetimePicker"
   label="时间选择"
   placeholder="点击选择时间"
@@ -438,8 +438,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="area"
   label="地区选择"
   placeholder="点击选择省市区"
@@ -487,8 +487,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   name="calendar"
   label="日历"
   placeholder="点击选择日期"
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 4be29120c..41c3f4347 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="area"
     :label="t('picker')"
     :placeholder="t('placeholder')"
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index d1dabdac1..db5745056 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="calendar"
     :label="t('calendar')"
     :placeholder="t('placeholder')"
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 7b502f496..65d8bf113 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="datetimePicker"
     :label="t('label')"
     :placeholder="t('placeholder')"
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index c47620e25..d582d97ea 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -1,8 +1,8 @@
 <template>
   <van-field
     v-model="value"
+    is-link
     readonly
-    clickable
     name="picker"
     :label="t('picker')"
     :placeholder="t('placeholder')"
diff --git a/src/form/test/__snapshots__/demo.spec.ts.snap b/src/form/test/__snapshots__/demo.spec.ts.snap
index c0d36522b..b7d81fbc8 100644
--- a/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -451,6 +451,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -471,6 +473,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -491,6 +495,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
       <div class="van-cell van-cell--clickable van-field"
            role="button"
@@ -511,6 +517,8 @@ exports[`should render demo and match snapshot 1`] = `
             >
           </div>
         </div>
+        <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+        </i>
       </div>
     </div>
     <div style="margin: 16px 16px 0px;">
diff --git a/src/picker/README.md b/src/picker/README.md
index 4328a087e..fe89375d7 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -217,8 +217,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   label="City"
   placeholder="Choose City"
   @click="state.showPicker = true"
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index 8c7286892..3de9d12ac 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -241,8 +241,8 @@ export default {
 ```html
 <van-field
   v-model="state.value"
+  is-link
   readonly
-  clickable
   label="城市"
   placeholder="选择城市"
   @click="state.showPicker = true"
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index c6e531eeb..dce797cea 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -49,8 +49,8 @@
   <demo-block card v-if="!isWeapp" :title="t('withPopup')">
     <van-field
       v-model="fieldValue"
+      is-link
       readonly
-      clickable
       :label="t('city')"
       :placeholder="t('chooseCity')"
       @click="onClickField"
diff --git a/src/picker/test/__snapshots__/demo.spec.ts.snap b/src/picker/test/__snapshots__/demo.spec.ts.snap
index 440cfbe28..9947926d9 100644
--- a/src/picker/test/__snapshots__/demo.spec.ts.snap
+++ b/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -692,6 +692,8 @@ exports[`should render demo and match snapshot 1`] = `
         >
       </div>
     </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
   </div>
   <transition-stub>
   </transition-stub>