feat(Area): add columns-top、columns-bottom prop (#5719)

src/area/README.md

@@ -84,6 +84,8 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 | Name | Description |
 |------|------|
 | title `v2.5.3` | Custom title |
+| columns-top `v2.5.3` | Custom content above columns |
+| columns-bottom `v2.5.3` | Custom content below columns |
 
 ### Methods
 

src/area/README.zh-CN.md

@@ -83,6 +83,8 @@ Vue.use(Area);
 | 名称 | 说明 |
 |------|------|
 | title `v2.5.3` | 自定义标题内容 |
+| columns-top `v2.5.3` | 自定义选项上方内容 |
+| columns-bottom `v2.5.3` | 自定义选项下方内容 |
 
 ### 方法
 

src/area/index.js

@@ -305,7 +305,11 @@ export default createComponent({
         visibleItemCount={this.visibleItemCount}
         cancelButtonText={this.cancelButtonText}
         confirmButtonText={this.confirmButtonText}
-        scopedSlots={pickSlots(this, ['title'])}
+        scopedSlots={pickSlots(this, [
+          'title',
+          'columns-top',
+          'columns-bottom',
+        ])}
         {...{ on }}
       />
     );

src/area/test/__snapshots__/index.spec.js.snap

@@ -114,6 +114,26 @@ exports[`columns-num prop 1`] = `
 </div>
 `;
 
+exports[`columns-top、columns-bottom slot 1`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
+  <!---->Top<div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>Bottom
+  <!---->
+</div>
+`;
+
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>

src/area/test/index.spec.js

@@ -139,3 +139,15 @@ test('title slot', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('columns-top、columns-bottom slot', async () => {
+  const wrapper = mount(Area, {
+    slots: {
+      'columns-top': 'Top',
+      'columns-bottom': 'Bottom',
+    },
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});

src/picker/README.md

@@ -288,6 +288,8 @@ Picker events will pass different parameters according to the columns are single
 |------|------|
 | default | Custom toolbar content |
 | title | Custom title |
+| columns-top | Custom content above columns |
+| columns-bottom | Custom content below columns |
 
 ### Data Structure of Column