From cc29b28c5b474e92a9724f778655e0876d098bc4 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 13 Mar 2020 15:23:54 +0800
Subject: [PATCH] chore(Form): fix demo border

---
 src/form/demo/FieldTypeArea.vue               |  3 ++-
 src/form/demo/FieldTypeDatetimePicker.vue     |  3 ++-
 src/form/demo/FieldTypePicker.vue             |  3 ++-
 src/form/demo/index.vue                       | 11 +++++++++++
 src/form/test/__snapshots__/demo.spec.js.snap | 12 ++++++------
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index ffad6dcf4..99243ef56 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="van-hairline--bottom">
     <van-field
       readonly
       clickable
       name="area"
       :value="value"
+      :border="false"
       :label="$t('picker')"
       :placeholder="$t('placeholder')"
       @click="showArea = true"
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 2ec061c9d..dfc8facef 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="van-hairline--bottom">
     <van-field
       readonly
       clickable
       name="datetimePicker"
       :value="value"
+      :border="false"
       :label="$t('label')"
       :placeholder="$t('placeholder')"
       @click="showPicker = true"
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 7f72674f9..921607160 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div class="van-hairline--bottom">
     <van-field
       readonly
       clickable
       name="picker"
       :value="value"
+      :border="false"
       :label="$t('picker')"
       :placeholder="$t('placeholder')"
       @click="showPicker = true"
diff --git a/src/form/demo/index.vue b/src/form/demo/index.vue
index 3f7794103..8fb83a612 100644
--- a/src/form/demo/index.vue
+++ b/src/form/demo/index.vue
@@ -19,3 +19,14 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+.demo-form {
+  width: 100vw;
+  overflow: hidden;
+
+  .van-hairline--bottom::after {
+    margin-left: 16px;
+  }
+}
+</style>
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index f1a25ca54..57d86d5a2 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -184,8 +184,8 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-hairline--bottom">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
           <div class="van-cell__title van-field__label"><span>选择器</span></div>
           <div class="van-cell__value van-field__value">
             <div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
@@ -193,8 +193,8 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-hairline--bottom">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
           <div class="van-cell__title van-field__label"><span>时间选择</span></div>
           <div class="van-cell__value van-field__value">
             <div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
@@ -202,8 +202,8 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+      <div class="van-hairline--bottom">
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
           <div class="van-cell__title van-field__label"><span>地区选择</span></div>
           <div class="van-cell__value van-field__value">
             <div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>