navigation-mixin.js
1.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
export default {
data() {
return {
hoverOption: -1
};
},
computed: {
optionsAllDisabled() {
return this.options.filter(option => option.visible).every(option => option.disabled);
}
},
watch: {
hoverIndex(val) {
if (typeof val === 'number' && val > -1) {
this.hoverOption = this.options[val] || {};
}
this.options.forEach(option => {
option.hover = this.hoverOption === option;
});
}
},
methods: {
navigateOptions(direction) {
if (!this.visible) {
this.visible = true;
return;
}
if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
if (!this.optionsAllDisabled) {
if (direction === 'next') {
this.hoverIndex++;
if (this.hoverIndex === this.options.length) {
this.hoverIndex = 0;
}
} else if (direction === 'prev') {
this.hoverIndex--;
if (this.hoverIndex < 0) {
this.hoverIndex = this.options.length - 1;
}
}
const option = this.options[this.hoverIndex];
if (option.disabled === true ||
option.groupDisabled === true ||
!option.visible) {
this.navigateOptions(direction);
}
this.$nextTick(() => this.scrollToOption(this.hoverOption));
}
}
}
};