如何在Vue.js 2中处理鼠标进入、鼠标离开和内容下拉菜单不消失的问题
<p>大家好，我想知道如何使用<code>@mouseenter</code>和<code>@mouseleave</code>来控制下拉内容，而不是让它消失</p>
<pre class="brush:php;toolbar:false;"><div class="wrapper">
<div class="link" @mouseenter="show = true" @mouseleave="show = false">项目</div>
<div class="content" v-if="show">这是一个内容</div>
</div></pre>
<p>我尝试了这样的方式，但当我想要悬停在内容上或与其交互时，我不知道如何处理，希望你们能帮助我。提前谢谢。</p>
1
914
收藏
尝试将
@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>