vue 菜单移入移出

Vue.js 中，菜单的移入移出效果可以通过监听元素的 `mouseenter` 和 `mouseleave` 事件以及使用 Vue 的计算属性和条件渲染来实现。以下是一个简单的示例：

1. 首先，在模板中绑定 `v-on:mouseenter` 和 `v-on:mouseleave`，给每个菜单项添加这样的事件处理器：

<ul class="menu">
  <li v-for="(item, index) in items" :key="index" @mouseenter="showDetails(index)" @mouseleave="hideDetails(index)">
    {{ item.name }}
  </li>
</ul>

<!-- 显示/隐藏详情部分的元素 -->
<div v-if="isShowingDetails">
  <!-- 详细内容 -->
</div>

2. 在组件的 `methods` 对象中定义 `showDetails` 和 `hideDetails` 方法，根据索引控制显示/隐藏详情：

export default {
  data() {
    return {
      items: ..., // 菜单列表
      isShowingDetails: false, // 存储当前是否显示详情
    };
  },
  methods: {
    showDetails(index) {
      this.isShowingDetails = true;
      this.$nextTick(() => {
        // 延迟执行以确保DOM更新完成
        this.highlightItem(index);
      });
    },
    hideDetails(index) {
      this.isShowingDetails = false;
    },
    highlightItem(index) {
      // 根据索引改变样式，如高亮选中的项
      this.$refs.menuItems[index].classList.add('active');
    },
  },
};

3. 如果需要在移除时取消高亮效果，可以在 `hideDetails` 方法里添加取消高亮的代码。

相关问题--
1. Vue 中如何监听元素的鼠标移入和移出事件？
2. 如何在 Vue 中使用计算属性控制元素的显示