diff --git a/packages/picker/en-US.md b/packages/picker/en-US.md index 37f94ea2a..48e5bba1d 100644 --- a/packages/picker/en-US.md +++ b/packages/picker/en-US.md @@ -147,6 +147,11 @@ Picker events will pass different parameters according to the columns are single | cancel | Triggered when click cancel button | Single column:current value,current index
Multiple columns:current values,current indexes | | change | Triggered when current option changed | Single column:Picker instance, current value,current index
Multiple columns:Picker instance, current values,column index | +### Slot + +| name | Description | +|------|------| +| title | Custom title | ### Data struct of columns diff --git a/packages/picker/index.js b/packages/picker/index.js index beb8114ad..68309fc74 100644 --- a/packages/picker/index.js +++ b/packages/picker/index.js @@ -54,7 +54,12 @@ export default sfc({ onChange(columnIndex) { if (this.simple) { - this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0)); + this.$emit( + 'change', + this, + this.getColumnValue(0), + this.getColumnIndex(0) + ); } else { this.$emit('change', this, this.getValues(), columnIndex); } @@ -96,7 +101,10 @@ export default sfc({ // set options of column by index setColumnValues(index, options) { const column = this.children[index]; - if (column && JSON.stringify(column.options) !== JSON.stringify(options)) { + if ( + column && + JSON.stringify(column.options) !== JSON.stringify(options) + ) { column.options = options; column.setIndex(0); } @@ -153,7 +161,10 @@ export default sfc({
{this.cancelButtonText || t('cancel')}
, - this.title &&
{this.title}
, + this.slots('title') || + (this.title && ( +
{this.title}
+ )),
{this.confirmButtonText || t('confirm')}
@@ -169,11 +180,7 @@ export default sfc({ )} -
+
{columns.map((item, index) => ( ))} -
+
); diff --git a/packages/picker/test/__snapshots__/index.spec.js.snap b/packages/picker/test/__snapshots__/index.spec.js.snap index 5e87d2817..c135cc82b 100644 --- a/packages/picker/test/__snapshots__/index.spec.js.snap +++ b/packages/picker/test/__snapshots__/index.spec.js.snap @@ -27,3 +27,14 @@ exports[`column watch default index 2`] = `
`; + +exports[`render title slot 1`] = ` +
+
+
取消
Custom title
确认
+
+
+
+
+
+`; diff --git a/packages/picker/test/index.spec.js b/packages/picker/test/index.spec.js index cb3e055c4..6813813bc 100644 --- a/packages/picker/test/index.spec.js +++ b/packages/picker/test/index.spec.js @@ -117,3 +117,18 @@ test('column watch default index', async () => { wrapper.vm.defaultIndex = 2; expect(wrapper).toMatchSnapshot(); }); + +test('render title slot', () => { + const wrapper = mount({ + template: ` + + + + `, + components: { + Picker + } + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/picker/zh-CN.md b/packages/picker/zh-CN.md index 2c9e0a1f2..f38ca7356 100644 --- a/packages/picker/zh-CN.md +++ b/packages/picker/zh-CN.md @@ -150,6 +150,11 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 | cancel | 点击取消按钮时触发 | 单列:选中值,选中值对应的索引
多列:所有列选中值,所有列选中值对应的索引 | | change | 选项改变时触发 | 单列:Picker 实例,选中值,选中值对应的索引
多列:Picker 实例,所有列选中值,当前列对应的索引 | +### Slot + +| 名称 | 说明 | +|------|------| +| title | 自定义标题内容 | ### Columns 数据结构