feat(Area): add title slot (#5719)

src/area/README.md

@@ -79,6 +79,12 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 | cancel | triggers when clicking the cancel button | - |
 | change | Triggered when current option changed | Picker instance, current values，column index |
 
+### Slots
+
+| Name | Description |
+|------|------|
+| title `v2.5.3` | Custom title |
+
 ### Methods
 
 Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods

src/area/README.zh-CN.md

@@ -78,6 +78,12 @@ Vue.use(Area);
 | cancel | 点击取消按钮时 | - |
 | change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
 
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| title `v2.5.3` | 自定义标题内容 |
+
 ### 方法
 
 通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)

src/area/index.js

@@ -10,6 +10,21 @@ function isOverseaCode(code) {
   return code[0] === '9';
 }
 
+function pickSlots(instance, keys) {
+  const { $slots, $scopedSlots } = instance;
+  const scopedSlots = {};
+
+  keys.forEach(key => {
+    if ($scopedSlots[key]) {
+      scopedSlots[key] = $scopedSlots[key];
+    } else if ($slots[key]) {
+      scopedSlots[key] = () => $slots[key];
+    }
+  });
+
+  return scopedSlots;
+}
+
 export default createComponent({
   props: {
     ...pickerProps,
@@ -290,6 +305,7 @@ export default createComponent({
         visibleItemCount={this.visibleItemCount}
         cancelButtonText={this.cancelButtonText}
         confirmButtonText={this.confirmButtonText}
+        scopedSlots={pickSlots(this, ['title'])}
         {...{ on }}
       />
     );

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

@@ -173,6 +173,27 @@ exports[`reset method 2`] = `
 </div>
 `;
 
+exports[`title 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>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
+  <!---->
+  <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>
+  <!---->
+</div>
+`;
+
 exports[`watch areaList & code 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

@@ -128,3 +128,14 @@ test('columns-num prop', async () => {
   await later();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('title slot', async () => {
+  const wrapper = mount(Area, {
+    scopedSlots: {
+      title: () => 'Custom Title',
+    },
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});

src/form/README.zh-CN.md

@@ -466,7 +466,7 @@ export default {
 | validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` |
 | colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
 | validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
-| scroll-to-error `2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
+| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
 
 > 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)