diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js index 0467a1950..5e36c1a8b 100644 --- a/src/picker/PickerColumn.js +++ b/src/picker/PickerColumn.js @@ -305,7 +305,7 @@ export default createComponent({ return (
  • -
    + {this.slots('option', option) ||
    }
    • ); }); diff --git a/src/picker/README.md b/src/picker/README.md index 65bce44f5..b8609568f 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -269,14 +269,15 @@ Picker events will pass different parameters according to the columns are single ### Slots -| Name | Description | -| ------------------ | ---------------------------- | -| default | Custom toolbar content | -| title | Custom title | -| confirm `v2.10.11` | Custom confirm button text | -| cancel `v2.10.11` | Custom cancel button text | -| columns-top | Custom content above columns | -| columns-bottom | Custom content below columns | +| Name | Description | SlotProps | +| --- | --- | --- | +| default | Custom toolbar content | - | +| title | Custom title | - | +| confirm `v2.10.11` | Custom confirm button text | - | +| cancel `v2.10.11` | Custom cancel button text | - | +| option `v2.10.11` | Custom option content | _option: string \| object_ | +| columns-top | Custom content above columns | - | +| columns-bottom | Custom content below columns | - | ### Data Structure of Column diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 10265a6c9..c7a22a457 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -292,18 +292,19 @@ export default { ### Slots -| 名称 | 说明 | -| ------------------ | ---------------------- | -| default | 自定义整个顶部栏的内容 | -| title | 自定义标题内容 | -| confirm `v2.10.11` | 自定义确认按钮内容 | -| cancel `v2.10.11` | 自定义取消按钮内容 | -| columns-top | 自定义选项上方内容 | -| columns-bottom | 自定义选项下方内容 | +| 名称 | 说明 | 参数 | +| ------------------ | ---------------------- | -------------------------- | +| default | 自定义整个顶部栏的内容 | - | +| title | 自定义标题内容 | - | +| confirm `v2.10.11` | 自定义确认按钮内容 | - | +| cancel `v2.10.11` | 自定义取消按钮内容 | - | +| option `v2.10.11` | 自定义选项内容 | _option: string \| object_ | +| columns-top | 自定义选项上方内容 | - | +| columns-bottom | 自定义选项下方内容 | - | ### Column 数据结构 -当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key` +当传入多列数据时，`columns` 为一个对象数组，数组中的每一个对象配置每一列，每一列有以下 `key`: | 键名 | 说明 | 类型 | | ----------------- | -------------------------- | ---------- | diff --git a/src/picker/index.js b/src/picker/index.js index aa496cd12..805a0062f 100644 --- a/src/picker/index.js +++ b/src/picker/index.js @@ -338,6 +338,9 @@ export default createComponent({ swipeDuration={this.swipeDuration} visibleItemCount={this.visibleItemCount} initialOptions={item.values} + scopedSlots={{ + option: this.$scopedSlots.option, + }} onChange={() => { this.onChange(columnIndex); }} diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap index a24c9adc9..fcec53681 100644 --- a/src/picker/test/__snapshots__/index.spec.js.snap +++ b/src/picker/test/__snapshots__/index.spec.js.snap @@ -103,6 +103,42 @@ exports[`render confirm/cancel slot 1`] = ` `; +exports[`render option slot with object columns 1`] = ` +
    +
    + +
    +
    +
      +
    • foo
      • +
    • bar
      • +
    +
    +
    +
    +
    + +
    +`; + +exports[`render option slot with simple columns 1`] = ` +
    +
    + +
    +
    +
      +
    • foo
      • +
    • bar
      • +
    +
    +
    +
    +
    + +
    +`; + exports[`render title slot 1`] = `
    Custom title
    diff --git a/src/picker/test/index.spec.js b/src/picker/test/index.spec.js index 46606c748..9d9d97fb2 100644 --- a/src/picker/test/index.spec.js +++ b/src/picker/test/index.spec.js @@ -160,6 +160,38 @@ test('render confirm/cancel slot', () => { expect(wrapper).toMatchSnapshot(); }); +test('render option slot with simple columns', () => { + const wrapper = mount({ + template: ` + + + + `, + data() { + return { columns: ['foo', 'bar'] }; + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + +test('render option slot with object columns', () => { + const wrapper = mount({ + template: ` + + + + `, + data() { + return { + columns: [{ text: 'foo' }, { text: 'bar' }], + }; + }, + }); + + expect(wrapper).toMatchSnapshot(); +}); + test('simulation finger swipe again before transitionend', () => { // mock getComputedStyle // see: https://github.com/jsdom/jsdom/issues/2588