javascript - 在 Vue 中悬停时向元素添加类，而不使用数据

Question

在 Vue 组件中，我有一个这样的菜单:

<ul class="menu-outer-wrapper">
  <li><a href="/foo-1">Foo 1</a></li>
  <li class="has-children">
    <a href="/foo-2">Foo 2</a>
    <ul>
      <li><a href="/child-1">Child 1</a></li>
      <li><a href="/child-2">Child 2</a></li>
      <li><a href="/child-3">Child 3</a></li>
    </ul>
  </li>
  <li><a href="/foo-5">Foo 5</a></li>
  <li class="has-children">
    <a href="/foo-6">Foo 6</a>
    <ul>
      <li><a href="/child-1">Child 1</a></li>
      <li><a href="/child-2">Child 2</a></li>
    </ul>
  </li>
  <li><a href="/foo-7">Foo 7</a></li>
  <li><a href="/foo-8">Foo 8</a></li>
</ul>

我想在悬停时将类 hovered 添加到 li.has-children 元素 (mouseenter)(待能够为该下拉列表的子项制作一些更好的动画。并在 mouseleave 上删除该类。

我知道有一些选项可以使用纯 CSS 来做到这一点，但控制延迟和软淡入是一种痛苦(并且很快变得非常困惑，没有添加一些类)。

我想象做这样的事情:

  ...
  mounted(){
    let liWithChildren = document.querySelectorAll( '.menu-outer-wrapper > li.has-children' );
    liWithChildren.forEach( (event, window) => {
      // Somehow add the class to the hovered element here.
      // But I don't know how. Or if it's a good/bad idea (performance-wise). 
    } 
  }

但这是要走的路吗？我可以不使用 data 来实现吗(因为菜单是由 CMS 系统动态生成的。

---

更新1

我正在努力保持我的 markdown 可读性。所以我想避免这样的事情:

<ul class="menu-outer-wrapper">
  <li :class="[ { 'hovered' : someVar } ]">
    <a href="/foo-1">Foo 1</a>
  </li>
  <li :class="[ { 'hovered' : someVar }, 'has-children' ]">
    <a href="/foo-2">Foo 2</a>
    <ul>
      <li><a href="/child-1">Child 1</a></li>
      <li><a href="/child-2">Child 2</a></li>
      <li><a href="/child-3">Child 3</a></li>
    </ul>
  </li>
  <li :class="[ { 'hovered' : someVar } ]">
    <a href="/foo-3">Foo 2</a>
  </li>
...
...
...

两者都是因为它不会与动态生成的菜单融合在一起。而且还因为它给 Markdown 添加了很多噪音。

---

更新2

我简化了示例，使其更易于理解。但是由于评论，我想我会详细说明动态生成的菜单。我正在做这样的事情:

<nav id="secondary-menu" v-if="secondaryMenu">
  <ul>
    <li
      :class="[ { 'has-children': r.children } ]"
      v-for="(r, r_key, r_index) in secondaryMenu">
      <a :href="r.url" :title="r.title">
        {{ r.title }}
      </a>
      <ul class="children" v-if="r.children">
        <li v-for="(c1, c1_key, c1_index) in r.children">
          <a :href="c1.url" :title="c1.title">
            {{ c1.title }}
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

您只需要 @mouseenter 和 @mouseleave 事件。您需要做的就是监听所有可能有 child 的列表项上的适当事件，然后如果目标元素具有“有 child ”的类，则执行您的类添加(或删除)。以下是我的做法:

<template>
  <nav id="secondary-menu" v-if="secondaryMenu">
    <ul>
      <li
        :class="[{ 'has-children': r.children }]"
        v-for="(r, r_key, r_index) in secondaryMenu"
        :key="`${r_key}-${r_index}`"
        @mouseenter="addClass"
        @mouseleave="removeClass"
      >
        <a :href="r.url" :title="r.title">
          {{ r.title }}
        </a>
        <ul class="children" v-if="r.children">
          <li
            v-for="(c1, c1_key, c1_index) in r.children"
            :key="`${c1_key}-${c1_index}`"
          >
            <a :href="c1.url" :title="c1.title">
              {{ c1.title }}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>
<script>
export default {
  name: "HoverNav",
  props: {
    secondaryMenu: {
      type: Array,
      required: true,
    },
  },
  methods: {
    addClass: function (e) {
      if (e.target.classList.contains("has-children")) {
        e.target.classList.add("hovered");
      }
    },
    removeClass: function (e) {
      if (e.target.classList.contains("has-children")) {
        e.target.classList.remove("hovered");
      }
    },
  },
};
</script>

这是一个非常不美观的沙箱。让我知道这是否适合你:)

https://codesandbox.io/s/headless-brook-ysq97?file=/src/components/HoverNav.vue:0-1169