mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-02 12:18:46 +08:00
Picker only emit user change (#6214)
* only emit user change for timepicker and datepicker * Test: remove custom timeout
This commit is contained in:
parent
b922664aa6
commit
1912c473ef
@ -215,7 +215,7 @@
|
||||
this.$emit('pick', {
|
||||
minDate: this.minDate,
|
||||
maxDate: this.maxDate
|
||||
});
|
||||
}, true, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -88,11 +88,11 @@
|
||||
},
|
||||
|
||||
nextTenYear() {
|
||||
this.$emit('pick', Number(this.year) + 10, false);
|
||||
this.$emit('pick', Number(this.year) + 10, false, true);
|
||||
},
|
||||
|
||||
prevTenYear() {
|
||||
this.$emit('pick', Number(this.year) - 10, false);
|
||||
this.$emit('pick', Number(this.year) - 10, false, true);
|
||||
},
|
||||
|
||||
handleYearTableClick(event) {
|
||||
@ -100,7 +100,7 @@
|
||||
if (target.tagName === 'A') {
|
||||
if (hasClass(target.parentNode, 'disabled')) return;
|
||||
const year = target.textContent || target.innerText;
|
||||
this.$emit('pick', Number(year));
|
||||
this.$emit('pick', Number(year), true, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -308,7 +308,7 @@
|
||||
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
|
||||
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
|
||||
if (this.minDate) this.date = new Date(this.minDate);
|
||||
this.handleConfirm(true);
|
||||
this.handleConfirm(true, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -392,7 +392,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
handleRangePick(val, close = true) {
|
||||
handleRangePick(val, close = true, user = true) {
|
||||
if (this.maxDate === val.maxDate && this.minDate === val.minDate) {
|
||||
return;
|
||||
}
|
||||
@ -400,7 +400,7 @@
|
||||
this.maxDate = val.maxDate;
|
||||
this.minDate = val.minDate;
|
||||
if (!close || this.showTime) return;
|
||||
this.handleConfirm();
|
||||
this.handleConfirm(false, user);
|
||||
},
|
||||
|
||||
changeToToday() {
|
||||
@ -477,9 +477,9 @@
|
||||
this.resetDate();
|
||||
},
|
||||
|
||||
handleConfirm(visible = false) {
|
||||
handleConfirm(visible = false, user = true) {
|
||||
if (this.minDate && this.maxDate) {
|
||||
this.$emit('pick', [this.minDate, this.maxDate], visible);
|
||||
this.$emit('pick', [this.minDate, this.maxDate], visible, user);
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -161,7 +161,7 @@
|
||||
this.date = newVal;
|
||||
this.year = newVal.getFullYear();
|
||||
this.month = newVal.getMonth();
|
||||
this.$emit('pick', newVal, false);
|
||||
this.$emit('pick', newVal, false, false);
|
||||
}
|
||||
},
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
|
||||
this.$emit('pick');
|
||||
this.$emit('pick', this.date);
|
||||
},
|
||||
|
||||
resetDate() {
|
||||
@ -256,7 +256,7 @@
|
||||
}
|
||||
},
|
||||
|
||||
handleTimePick(picker, visible, first) {
|
||||
handleTimePick(picker, visible) {
|
||||
if (picker) {
|
||||
let oldDate = new Date(this.date.getTime());
|
||||
let hour = picker.getHours();
|
||||
@ -273,9 +273,7 @@
|
||||
this.date = new Date(oldDate.getTime());
|
||||
}
|
||||
|
||||
if (!first) {
|
||||
this.timePickerVisible = visible;
|
||||
}
|
||||
this.timePickerVisible = visible;
|
||||
},
|
||||
|
||||
handleMonthPick(month) {
|
||||
@ -294,28 +292,28 @@
|
||||
}
|
||||
},
|
||||
|
||||
handleDatePick(value) {
|
||||
handleDatePick(value, close, user = true) {
|
||||
if (this.selectionMode === 'day') {
|
||||
if (!this.showTime) {
|
||||
this.$emit('pick', new Date(value.getTime()));
|
||||
this.$emit('pick', new Date(value.getTime()), false, user);
|
||||
}
|
||||
this.date.setFullYear(value.getFullYear());
|
||||
this.date.setMonth(value.getMonth(), value.getDate());
|
||||
} else if (this.selectionMode === 'week') {
|
||||
this.week = value.week;
|
||||
this.$emit('pick', value.date);
|
||||
this.$emit('pick', value.date, false, user);
|
||||
}
|
||||
|
||||
this.resetDate();
|
||||
},
|
||||
|
||||
handleYearPick(year, close = true) {
|
||||
handleYearPick(year, close = true, user) {
|
||||
this.year = year;
|
||||
if (!close) return;
|
||||
|
||||
this.date.setFullYear(year);
|
||||
if (this.selectionMode === 'year') {
|
||||
this.$emit('pick', new Date(year, 0, 1));
|
||||
this.$emit('pick', new Date(year, 0, 1), false, user);
|
||||
} else {
|
||||
this.currentView = 'month';
|
||||
}
|
||||
@ -330,6 +328,7 @@
|
||||
},
|
||||
|
||||
confirm() {
|
||||
console.log(111);
|
||||
this.date.setMilliseconds(0);
|
||||
this.$emit('pick', this.date);
|
||||
},
|
||||
|
@ -147,12 +147,12 @@
|
||||
hours: time.minTime.getHours(),
|
||||
minutes: time.minTime.getMinutes(),
|
||||
seconds: time.minTime.getSeconds()
|
||||
});
|
||||
}, true);
|
||||
this.handleMaxChange({
|
||||
hours: time.maxTime.getHours(),
|
||||
minutes: time.maxTime.getMinutes(),
|
||||
seconds: time.maxTime.getSeconds()
|
||||
});
|
||||
}, true);
|
||||
},
|
||||
|
||||
handleClear() {
|
||||
@ -163,7 +163,7 @@
|
||||
this.$emit('pick');
|
||||
},
|
||||
|
||||
handleChange() {
|
||||
handleChange(notUser) {
|
||||
if (this.minTime > this.maxTime) return;
|
||||
MIN_TIME.setFullYear(this.minTime.getFullYear());
|
||||
MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate());
|
||||
@ -171,10 +171,10 @@
|
||||
MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate());
|
||||
this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
|
||||
this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
|
||||
this.handleConfirm(true);
|
||||
this.handleConfirm(true, false, notUser);
|
||||
},
|
||||
|
||||
handleMaxChange(date) {
|
||||
handleMaxChange(date, notUser) {
|
||||
if (date.hours !== undefined) {
|
||||
this.maxTime.setHours(date.hours);
|
||||
this.maxHours = this.maxTime.getHours();
|
||||
@ -190,7 +190,7 @@
|
||||
this.handleChange();
|
||||
},
|
||||
|
||||
handleMinChange(date) {
|
||||
handleMinChange(date, notUser) {
|
||||
if (date.hours !== undefined) {
|
||||
this.minTime.setHours(date.hours);
|
||||
this.minHours = this.minTime.getHours();
|
||||
@ -217,7 +217,7 @@
|
||||
this.selectionRange = [start + this.offset, end + this.offset];
|
||||
},
|
||||
|
||||
handleConfirm(visible = false, first = false) {
|
||||
handleConfirm(visible = false, first = false, notUser = false) {
|
||||
const minSelectableRange = this.$refs.minSpinner.selectableRange;
|
||||
const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
|
||||
|
||||
@ -225,7 +225,7 @@
|
||||
this.maxTime = limitRange(this.maxTime, maxSelectableRange);
|
||||
|
||||
if (first) return;
|
||||
this.$emit('pick', [this.minTime, this.maxTime], visible, first);
|
||||
this.$emit('pick', [this.minTime, this.maxTime], visible, !notUser);
|
||||
},
|
||||
|
||||
adjustScrollTop() {
|
||||
|
@ -79,9 +79,9 @@
|
||||
value(val) {
|
||||
if (!val) return;
|
||||
if (this.minTime && compareTime(val, this.minTime) < 0) {
|
||||
this.$emit('pick');
|
||||
this.$emit('pick', '', false, false);
|
||||
} else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
|
||||
this.$emit('pick');
|
||||
this.$emit('pick', '', false, false);
|
||||
}
|
||||
this.$nextTick(() => this.scrollToOption());
|
||||
}
|
||||
@ -95,7 +95,7 @@
|
||||
},
|
||||
|
||||
handleClear() {
|
||||
this.$emit('pick');
|
||||
this.$emit('pick', '', false, false);
|
||||
},
|
||||
|
||||
scrollToOption(className = 'selected') {
|
||||
@ -122,6 +122,7 @@
|
||||
}
|
||||
if (!items[index].disabled) {
|
||||
this.value = items[index].value;
|
||||
this.$emit('pick', this.value, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -79,7 +79,7 @@
|
||||
hours: date.getHours(),
|
||||
minutes: date.getMinutes(),
|
||||
seconds: date.getSeconds()
|
||||
});
|
||||
}, true);
|
||||
this.$nextTick(_ => this.adjustScrollTop());
|
||||
},
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.$emit('pick');
|
||||
this.$emit('pick', '', false, true);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
@ -132,10 +132,10 @@
|
||||
this.minutes = this.currentDate.getMinutes();
|
||||
this.seconds = this.currentDate.getSeconds();
|
||||
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
|
||||
this.$emit('pick', date);
|
||||
this.$emit('pick', date, false, true);
|
||||
},
|
||||
|
||||
handleChange(date) {
|
||||
handleChange(date, notUser) {
|
||||
if (date.hours !== undefined) {
|
||||
this.currentDate.setHours(date.hours);
|
||||
this.hours = this.currentDate.getHours();
|
||||
@ -148,8 +148,7 @@
|
||||
this.currentDate.setSeconds(date.seconds);
|
||||
this.seconds = this.currentDate.getSeconds();
|
||||
}
|
||||
|
||||
this.handleConfirm(true);
|
||||
this.handleConfirm(true, null, notUser);
|
||||
},
|
||||
|
||||
setSelectionRange(start, end) {
|
||||
@ -157,10 +156,10 @@
|
||||
this.selectionRange = [start, end];
|
||||
},
|
||||
|
||||
handleConfirm(visible = false, first) {
|
||||
handleConfirm(visible = false, first, notUser = false) {
|
||||
if (first) return;
|
||||
const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
|
||||
this.$emit('pick', date, visible, first);
|
||||
this.$emit('pick', date, visible, !notUser);
|
||||
},
|
||||
|
||||
adjustScrollTop() {
|
||||
|
@ -267,7 +267,6 @@ export default {
|
||||
}
|
||||
},
|
||||
displayValue(val) {
|
||||
this.$emit('change', val);
|
||||
this.dispatch('ElFormItem', 'el.form.change');
|
||||
}
|
||||
},
|
||||
@ -492,10 +491,13 @@ export default {
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
|
||||
this.picker.$on('dodestroy', this.doDestroy);
|
||||
this.picker.$on('pick', (date = '', visible = false) => {
|
||||
this.picker.$on('pick', (date = '', visible = false, user = true) => {
|
||||
// do not emit if values are same
|
||||
if (!valueEquals(this.value, date)) {
|
||||
this.$emit('input', date);
|
||||
if (user && this.value !== date) {
|
||||
this.$nextTick(() => this.$emit('change', this.displayValue));
|
||||
};
|
||||
}
|
||||
this.pickerVisible = this.picker.visible = visible;
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
|
@ -45,6 +45,7 @@ export default {
|
||||
if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
|
||||
this.pickerVisible = false;
|
||||
event.stopPropagation();
|
||||
this.picker.confirm();
|
||||
this.currentValue = this.picker.date;
|
||||
this.$refs.reference.$refs.input.blur();
|
||||
return;
|
||||
|
Loading…
Reference in New Issue
Block a user