Wie man mit dem Problem umgeht, dass die Maus in Vue.js 2 eindringt, die Maus verlässt und das Inhalts-Dropdown-Menü nicht verschwindet

Question

Hallo zusammen, ich würde gerne wissen, wie man @mouseenter und @mouseleave verwendet, um den Dropdown-Inhalt zu steuern, anstatt ihn verschwinden zu lassen

<div class="wrapper">
  <div class="link" @mouseenter="show = true" @mouseleave="show = false">project</div>
  <div class="content" v-if="show">Dies ist Inhalt</div>
</div>

Ich habe so etwas versucht, weiß aber nicht, wie ich damit umgehen soll, wenn ich mit der Maus über den Inhalt fahren oder mit ihm interagieren möchte. Ich hoffe, ihr könnt mir helfen. Vielen Dank im Voraus.

Answer 1

尝试将@mouseleave事件移到content中：

new Vue({
  el: "#app",
  data: {
    show: false,
    links: [1,2,3,4,5],
    linkId: null
  },
})

.wrapper{
  display: grid;
  justify-content: start;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="wrapper" @mouseleave="linkId = null">
  <ul>
    <li v-for="link in links" :key="link">
      <div class="link" @mouseenter.prevent="linkId = link" >Item{{ link }}</div>
      <div class="content" v-if="link === linkId" @mouseleave.prevent="linkId = null">这是一个内容</div>
    </li>
  </ul>
</div>
</div>