鼠标移入A弹出B , 移出A隐藏B，
A：
<div class="show_left" @click="onMouseOverO" @mouseleave="onMouseOutO"></div>
B： 文章来源：https://www.toymoban.com/news/detail-759500.html
<div class="detail_box"
v-if="isShow"
@mouseover="onMouseOverT"
@mouseleave="onMouseOutT">
</div>
逻辑：文章来源地址https://www.toymoban.com/news/detail-759500.html
<script>
let flg = true
export default {
name: '',
components: {},
data() {
return {
isShow: false,
}
},
methods: {
// 鼠标移入1
onMouseOverO(item) {
this.isShow = true
},
// 鼠标移出1
onMouseOutO() {
setTimeout(() => {
if (flg) {
this.isShow = false
}
}, 1)
},
// 鼠标移入2
onMouseOverT() {
flg = false
},
// 鼠标移出2
onMouseOutT() {
flg = true
this.isShow = false
},
}
}
</script>到了这里，关于vue鼠标移入显示弹窗，移出隐藏弹窗,记录一下的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
