如何在Vue.js 2中处理鼠标进入、鼠标离开和内容下拉菜单不消失的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何在Vue.js 2中处理鼠标进入、鼠标离开和内容下拉菜单不消失的问题

P粉226667290 2023-08-28 12:58:10

[Vue.js讨论组]

804

<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>

P粉226667290

全部回复(1)

P粉5643017822023-08-29 12:19:09 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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>