diff --git a/src/picker/index.js b/src/picker/index.js
index 02bf60e97..b04d7fc7d 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -63,7 +63,12 @@ export default createComponent({
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);
}
@@ -105,7 +110,10 @@ export default createComponent({
// 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);
}
@@ -142,13 +150,70 @@ export default createComponent({
onCancel() {
this.emit('cancel');
+ },
+
+ genTitle() {
+ const titleSlot = this.slots('title');
+
+ if (titleSlot) {
+ return titleSlot;
+ }
+
+ if (this.title) {
+ return
{this.title}
;
+ }
+ },
+
+ genToolbar() {
+ if (this.showToolbar) {
+ return (
+
+ {this.slots() || [
+ ,
+ this.genTitle(),
+
+ ]}
+
+ );
+ }
+ },
+
+ genColumns() {
+ const columns = this.simple ? [this.columns] : this.columns;
+
+ return columns.map((item, index) => (
+
{
+ this.onChange(index);
+ }}
+ />
+ ));
}
},
render(h) {
const { itemHeight } = this;
const wrapHeight = itemHeight * this.visibleItemCount;
- const columns = this.simple ? [this.columns] : this.columns;
const frameStyle = {
height: `${itemHeight}px`
@@ -162,49 +227,25 @@ export default createComponent({
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
};
- const Toolbar = this.showToolbar && (
-
- {this.slots() || [
-
,
- this.slots('title') ||
- (this.title && (
-
{this.title}
- )),
-
- ]}
-
- );
-
return (
- {this.toolbarPosition === 'top' ? Toolbar : h()}
+ {this.toolbarPosition === 'top' ? this.genToolbar() : h()}
{this.loading ?
: h()}
{this.slots('columns-top')}
-
- {columns.map((item, index) => (
-
{
- this.onChange(index);
- }}
- />
- ))}
+
+ {this.genColumns()}
-
+
{this.slots('columns-bottom')}
- {this.toolbarPosition === 'bottom' ? Toolbar : h()}
+ {this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
);
}
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index 5d427bec3..1464ed379 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -42,8 +42,8 @@ exports[`renders demo correctly 1`] = `