From 7344389535dde2d4725e2311ff73f55b308380c2 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Tue, 25 Feb 2020 19:20:29 +0800 Subject: [PATCH] feat(Area): add title slot (#5719) --- src/area/README.md | 6 ++++++ src/area/README.zh-CN.md | 6 ++++++ src/area/index.js | 16 ++++++++++++++ .../test/__snapshots__/index.spec.js.snap | 21 +++++++++++++++++++ src/area/test/index.spec.js | 11 ++++++++++ src/form/README.zh-CN.md | 2 +- 6 files changed, 61 insertions(+), 1 deletion(-) diff --git a/src/area/README.md b/src/area/README.md index 132def45e..ac5541483 100644 --- a/src/area/README.md +++ b/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 diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index aa5ac7203..577014b93 100644 --- a/src/area/README.zh-CN.md +++ b/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) diff --git a/src/area/index.js b/src/area/index.js index 446482564..d25c5b308 100644 --- a/src/area/index.js +++ b/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 }} /> ); diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap index b95110eb6..80f92f336 100644 --- a/src/area/test/__snapshots__/index.spec.js.snap +++ b/src/area/test/__snapshots__/index.spec.js.snap @@ -173,6 +173,27 @@ exports[`reset method 2`] = ` `; +exports[`title slot 1`] = ` +
+
Custom Title
+ +
+
+
    +
    +
    +
      +
      +
      +
        +
        +
        +
        +
        + +
        +`; + exports[`watch areaList & code 1`] = `
        diff --git a/src/area/test/index.spec.js b/src/area/test/index.spec.js index 5a4f3e037..9a440fdf4 100644 --- a/src/area/test/index.spec.js +++ b/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(); +}); diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index 635a7f1d4..27e75683d 100644 --- a/src/form/README.zh-CN.md +++ b/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)