Vue自动补全列表鼠标悬停与键盘导航高亮冲突问题求助

核心问题出在鼠标悬停的CSS高亮状态和键盘选中的状态没有互斥逻辑，导致两者同时生效。以下是两种直接可行的解决思路：

思路1：用Vue响应式状态统一管理高亮（推荐） #

放弃依赖CSS的:hover伪类单独控制鼠标悬停高亮，改用响应式变量管理当前唯一的高亮项——不管是鼠标悬停还是键盘导航触发，都通过这个变量控制高亮状态：

1. 在组件data里定义highlightedIndex（初始值设为-1，代表无高亮项）
2. 鼠标悬停列表项时，将highlightedIndex设为当前项的索引；鼠标移出时重置为-1（若需保留键盘选中状态，可调整逻辑）
3. 键盘上下箭头导航时，直接更新highlightedIndex为对应索引，自动覆盖之前的鼠标悬停状态
4. 用:class绑定高亮样式，替代CSS的:hover

示例代码片段：

<template>
  <div class="autocomplete">
    <input v-model="inputVal" @keydown="handleKeyNav" />
    <ul class="suggest-list">
      <li
        v-for="(item, idx) in suggestList"
        :key="item.id"
        :class="{ 'highlight': idx === highlightedIndex }"
        @mouseenter="highlightedIndex = idx"
        @mouseleave="highlightedIndex = -1"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      suggestList: [],
      highlightedIndex: -1
    }
  },
  methods: {
    handleKeyNav(e) {
      const maxIdx = this.suggestList.length - 1;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        this.highlightedIndex = this.highlightedIndex >= maxIdx ? 0 : this.highlightedIndex + 1;
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        this.highlightedIndex = this.highlightedIndex <= 0 ? maxIdx : this.highlightedIndex - 1;
      } else if (e.key === 'Enter' && this.highlightedIndex !== -1) {
        // 选中逻辑
        this.inputVal = this.suggestList[this.highlightedIndex].name;
        this.highlightedIndex = -1;
      }
    }
  }
}
</script>

<style scoped>
.suggest-list .highlight {
  background-color: #f0f7ff; /* 统一高亮样式 */
  cursor: pointer;
}
/* 删除原有的:hover样式 */
</style>

思路2：保留:hover但添加键盘导航时的样式覆盖 #

如果一定要保留鼠标悬停的:hover样式，可以在键盘操作时给列表容器添加状态类，用CSS优先级覆盖:hover的样式：

1. 定义isKeyboardNav状态，初始值为false
2. 键盘事件触发时将其设为true，鼠标进入列表时设为false
3. 编写CSS规则，当容器带有keyboard-nav-active类时，禁用列表项的:hover样式

示例代码片段：

<template>
  <div class="autocomplete">
    <input v-model="inputVal" @keydown="handleKeyNav" />
    <ul 
      class="suggest-list" 
      :class="{ 'keyboard-nav-active': isKeyboardNav }"
      @mouseenter="isKeyboardNav = false"
    >
      <li
        v-for="(item, idx) in suggestList"
        :key="item.id"
        :class="{ 'key-highlight': idx === highlightedIndex }"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      suggestList: [],
      highlightedIndex: -1,
      isKeyboardNav: false
    }
  },
  methods: {
    handleKeyNav(e) {
      this.isKeyboardNav = true;
      const maxIdx = this.suggestList.length - 1;
      // 键盘导航逻辑同思路1
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        this.highlightedIndex = this.highlightedIndex >= maxIdx ? 0 : this.highlightedIndex + 1;
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        this.highlightedIndex = this.highlightedIndex <= 0 ? maxIdx : this.highlightedIndex - 1;
      } else if (e.key === 'Enter' && this.highlightedIndex !== -1) {
        this.inputVal = this.suggestList[this.highlightedIndex].name;
        this.highlightedIndex = -1;
      }
    }
  }
}
</script>

<style scoped>
.suggest-list li:hover {
  background-color: #f0f7ff;
}
.suggest-list.keyboard-nav-active li:hover {
  background-color: transparent; /* 重置为默认背景 */
}
.suggest-list .key-highlight {
  background-color: #e6f2ff; /* 键盘选中样式，可与hover区分 */
}
</style>

两种思路都能解决视觉混淆问题，推荐思路1，因为状态管理更统一，逻辑更清晰，不会出现DOM操作与Vue响应式状态脱节的情况。

内容的提问来源于stack exchange，提问作者ionecum