mirror of https://github.com/ElemeFE/element
TimeSelect: support select with up & down (#6023)
* TimeSelect: support select with up&down * using map & indexOf instead of findIndex * fix select when time disabled * fix ArrowUp * TimeSelect: valid data when component blur or enter * fix: #2514pull/6189/head
parent
b86fc3e13c
commit
5afe091c0e
|
@ -105,6 +105,24 @@
|
||||||
|
|
||||||
handleMenuEnter() {
|
handleMenuEnter() {
|
||||||
this.$nextTick(() => this.scrollToOption());
|
this.$nextTick(() => this.scrollToOption());
|
||||||
|
},
|
||||||
|
|
||||||
|
scrollDown(step) {
|
||||||
|
const items = this.items;
|
||||||
|
let index = items.map(item => item.value).indexOf(this.value);
|
||||||
|
let length = items.length;
|
||||||
|
let total = Math.abs(step);
|
||||||
|
step = step > 0 ? 1 : -1;
|
||||||
|
while (length-- && total) {
|
||||||
|
index = (index + step + items.length) % items.length;
|
||||||
|
const item = items[index];
|
||||||
|
if (!item.disabled) {
|
||||||
|
total--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!items[index].disabled) {
|
||||||
|
this.value = items[index].value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -9,5 +9,35 @@ export default {
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
this.type = 'time-select';
|
this.type = 'time-select';
|
||||||
this.panel = Panel;
|
this.panel = Panel;
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleKeydown(event) {
|
||||||
|
const keyCode = event.keyCode;
|
||||||
|
// TAB or ESC or Enter
|
||||||
|
if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
|
||||||
|
const input = this.$refs.reference;
|
||||||
|
const index = this.picker.items.map(v => v.value).indexOf(input.currentValue);
|
||||||
|
const exist = index !== -1;
|
||||||
|
if (!exist) {
|
||||||
|
input.currentValue = this.currentValue;
|
||||||
|
} else {
|
||||||
|
this.picker.handleClick(this.picker.items[index]);
|
||||||
|
}
|
||||||
|
this.pickerVisible = false;
|
||||||
|
input.$refs.input.blur();
|
||||||
|
event.stopPropagation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keyCode === 38 || keyCode === 40) {
|
||||||
|
const mapping = { 40: 1, 38: -1 };
|
||||||
|
const offset = mapping[keyCode.toString()];
|
||||||
|
this.picker.scrollDown(offset);
|
||||||
|
this.currentValue = this.picker.value;
|
||||||
|
event.stopPropagation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue