VueJS Hover Menu - Предотвращение закрытия меню при отпускании мыши - PullRequest
0 голосов
/ 09 октября 2019

Я пытаюсь создать меню, в котором есть дочерние меню; когда родитель находится над парой, открывается дочернее меню. Дочернее меню должно закрываться только тогда, когда мышь покидает либо дочернее меню, либо родительское. Проблема в том, что когда вы перемещаете мышь в дочернее меню, оно закрывается. Мне не нужно закрываться, если мышь находится в открытом дочернем меню.

Я пытался добавить различные таймауты и событие mouseenter для дочернего элемента, чтобы повторно вызвать событие. Однако когда мышь покидает родителя, дочернее меню закрывается.

<li
    v-else
    :class="[{'has-sub-menu': item.child}, {'active': itemHover === true}]"
    v-on="disableHover && isCollapsed ? { click: mouseEnterEvent } : { mouseover: mouseEnterEvent }"
    @mouseout="mouseLeaveEvent"
  >
    <a :href="item.href">
      <div v-if="level == 1" class="icon-w">
        <div :class="item.icon"></div>
      </div>
      {{item.title}}
    </a>
    <div v-if="item.child" class="sub-menu-w">
      <div class="sub-menu-header">{{item.title}}</div>
      <div class="sub-menu-icon">
        <i :class="item.icon"></i>
      </div>
      <div class="sub-menu-i">
        <ul class="sub-menu">
          <sidebar-menu-item
            v-for="(subItem, index) in item.child"
            :key="index"
            :item="subItem"
            :level="level+1"
            :show-child="showChild"
            :rtl="rtl"
            :is-collapsed="isCollapsed"
          ></sidebar-menu-item>
        </ul>
      </div>
    </div>
  </li>
methods: {
    mouseEnterEvent(event) {
      setTimeout(() => {
        event.stopPropagation();
        this.itemHover = true;
        this.$emit("menu-active", { event, item: this.item });
      }, 0);
    },
    mouseLeaveEvent(event) {
        setTimeout(() => {
        event.stopPropagation();
        this.itemHover = false;
        this.$emit("menu-not-active", { event, item: this.item });
      }, 1000);
    }
  }

Мне нужно, чтобы дочернее меню оставалось открытым, пока мышь входит в него.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...