Bagaimana untuk menangani masalah tetikus masuk, tetikus meninggalkan dan menu lungsur kandungan tidak hilang dalam Vue.js 2

Question

Hai semua, saya ingin tahu cara menggunakan @mouseenter dan @mouseleave

<div class="wrapper">
  <kelas div="pautan" @mouseenter="tunjukkan = benar" @mouseleave="tunjukkan = palsu">projek</div>
  <div class="kandungan" v-if="tunjukkan">Ini adalah kandungan</div>
</div>

Saya mencuba sesuatu seperti ini tetapi saya tidak tahu cara mengendalikannya apabila saya ingin menuding atau berinteraksi dengan kandungan, harap anda semua boleh membantu saya. Terima kasih terlebih dahulu.

Answer 1

Cuba masukkan @mouseleave事件移到content ke dalam:

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>