4392964981f80c548a7c540392b9c5d4560d7c3f46e9254693241a64b79f31457613d68b2a1a7db2ed2f2d82578a25a43ddd48891fe093b59e82c171787c7c 1.4 KB

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