github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

DatePicker: make type responsive(#4417)

pull/4518/head
CoffeeDeveloper 2017-04-27 23:28:09 -05:00 committed by 杨奕
parent 5013415426
commit 4243920a17
3 changed files with 92 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/date-picker/src/picker.vue
View File

@ -220,7 +220,8 @@ export default {
return { return {
pickerVisible: false, pickerVisible: false,
showClose: false, showClose: false,
currentValue: '' currentValue: '',
unwatchPickerOptions: null
}; };
}, },
@ -411,7 +412,26 @@ export default {
showPicker() { showPicker() {
if (this.$isServer) return; if (this.$isServer) return;
if (!this.picker) { if (!this.picker) {
this.panel.defaultValue = this.defaultValue || this.currentValue; this.mountPicker();
}
this.pickerVisible = this.picker.visible = true;
this.updatePopper();
if (this.currentValue instanceof Date) {
this.picker.date = new Date(this.currentValue.getTime());
} else {
this.picker.value = this.currentValue;
}
this.picker.resetView && this.picker.resetView();
this.$nextTick(() => {
this.picker.ajustScrollTop && this.picker.ajustScrollTop();
});
},
mountPicker() {
this.panel.defaultValue = this.currentValue;
this.picker = new Vue(this.panel).$mount(); this.picker = new Vue(this.panel).$mount();
this.picker.popperClass = this.popperClass; this.picker.popperClass = this.popperClass;
this.popperElm = this.picker.$el; this.popperElm = this.picker.$el;
@ -443,10 +463,9 @@ export default {
} }
}; };
updateOptions(); updateOptions();
this.$watch('pickerOptions', () => updateOptions(), { deep: true }); this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true });
this.$el.appendChild(this.picker.$el); this.$el.appendChild(this.picker.$el);
this.pickerVisible = this.picker.visible = true;
this.picker.resetView && this.picker.resetView(); this.picker.resetView && this.picker.resetView();
this.picker.$on('dodestroy', this.doDestroy); this.picker.$on('dodestroy', this.doDestroy);
@ -460,22 +479,17 @@ export default {
this.refInput.setSelectionRange(start, end); this.refInput.setSelectionRange(start, end);
this.refInput.focus(); this.refInput.focus();
}); });
} else { },
this.pickerVisible = this.picker.visible = true;
unmountPicker() {
if (this.picker) {
this.picker.$destroy();
this.picker.$off();
if (typeof this.unwatchPickerOptions === 'function') {
this.unwatchPickerOptions();
} }
this.picker.$el.parentNode.removeChild(this.picker.$el);
this.updatePopper();
if (this.currentValue instanceof Date) {
this.picker.date = new Date(this.currentValue.getTime());
} else {
this.picker.value = this.currentValue;
} }
this.picker.resetView && this.picker.resetView();
this.$nextTick(() => {
this.picker.ajustScrollTop && this.picker.ajustScrollTop();
});
} }
} }
}; };

12
packages/date-picker/src/picker/date-picker.js
View File

@ -21,6 +21,18 @@ export default {
} }
}, },
watch: {
type(type) {
if (this.picker) {
this.unmountPicker();
this.panel = getPanel(type);
this.mountPicker();
} else {
this.panel = getPanel(type);
}
}
},
created() { created() {
this.panel = getPanel(this.type); this.panel = getPanel(this.type);
} }

14
packages/date-picker/src/picker/time-picker.js
View File

@ -17,6 +17,20 @@ export default {
}; };
}, },
watch: {
isRange(isRange) {
if (this.picker) {
this.unmountPicker();
this.type = isRange ? 'timerange' : 'time';
this.panel = isRange ? TimeRangePanel : TimePanel;
this.mountPicker();
} else {
this.type = isRange ? 'timerange' : 'time';
this.panel = isRange ? TimeRangePanel : TimePanel;
}
}
},
created() { created() {
this.type = this.isRange ? 'timerange' : 'time'; this.type = this.isRange ? 'timerange' : 'time';
this.panel = this.isRange ? TimeRangePanel : TimePanel; this.panel = this.isRange ? TimeRangePanel : TimePanel;