feat(Field): add extra slot (#6290)

* feat(Field): add extra slot

* docs: remove form demo style

src/form/demo/FieldTypeArea.vue

@@ -1,23 +1,26 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="area"
-      :value="value"
-      :border="false"
-      :label="t('picker')"
-      :placeholder="t('placeholder')"
-      @click="showArea = true"
-    />
-    <van-popup v-model="showArea" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="area"
+    :value="value"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="showArea = true"
+  >
+    <van-popup
+      v-model="showArea"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-area
         :area-list="t('areaList')"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>

src/form/demo/FieldTypeCalendar.vue

@@ -1,16 +1,20 @@
 <template>
-  <div>
-    <van-field
-      readonly
-      clickable
-      name="calendar"
-      :value="value"
-      :label="t('calendar')"
-      :placeholder="t('placeholder')"
-      @click="showCalendar = true"
+  <van-field
+    readonly
+    clickable
+    name="calendar"
+    :value="value"
+    :label="t('calendar')"
+    :placeholder="t('placeholder')"
+    @click="showCalendar = true"
+  >
+    <van-calendar
+      v-model="showCalendar"
+      slot="extra"
+      get-container="body"
+      @confirm="onConfirm"
     />
-    <van-calendar v-model="showCalendar" @confirm="onConfirm" />
-  </div>
+  </van-field>
 </template>
 
 <script>

src/form/demo/FieldTypeDatetimePicker.vue

@@ -1,23 +1,26 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="datetimePicker"
-      :value="value"
-      :border="false"
-      :label="t('label')"
-      :placeholder="t('placeholder')"
-      @click="showPicker = true"
-    />
-    <van-popup v-model="showPicker" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="datetimePicker"
+    :value="value"
+    :label="t('label')"
+    :placeholder="t('placeholder')"
+    @click="showPicker = true"
+  >
+    <van-popup
+      v-model="showPicker"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-datetime-picker
         type="time"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>

src/form/demo/FieldTypePicker.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="van-hairline--bottom">
-    <van-field
-      readonly
-      clickable
-      name="picker"
-      :value="value"
-      :border="false"
-      :label="t('picker')"
-      :placeholder="t('placeholder')"
-      @click="showPicker = true"
-    />
-    <van-popup v-model="showPicker" position="bottom">
+  <van-field
+    readonly
+    clickable
+    name="picker"
+    :value="value"
+    :label="t('picker')"
+    :placeholder="t('placeholder')"
+    @click="showPicker = true"
+  >
+    <van-popup
+      v-model="showPicker"
+      slot="extra"
+      position="bottom"
+      get-container="body"
+    >
       <van-picker
         show-toolbar
         :columns="t('textColumns')"
@@ -18,7 +21,7 @@
         @cancel="onCancel"
       />
     </van-popup>
-  </div>
+  </van-field>
 </template>
 
 <script>

src/form/demo/index.vue

@@ -19,14 +19,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-.demo-form {
-  width: 100vw;
-  overflow: hidden;
-
-  .van-hairline--bottom::after {
-    margin-left: 16px;
-  }
-}
-</style>

src/form/test/__snapshots__/demo.spec.js.snap

@@ -184,41 +184,29 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <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>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable 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>
         </div>
-        <!---->
       </div>
-      <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>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable 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>
         </div>
-        <!---->
       </div>
-      <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>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable 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>
         </div>
-        <!---->
       </div>
-      <div>
-        <div role="button" tabindex="0" class="van-cell van-cell--clickable 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="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
-          </div>
+      <div role="button" tabindex="0" class="van-cell van-cell--clickable 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="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
         </div>
-        <!---->
       </div>
       <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
         提交