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>