鼠标移入A弹出B , 移出A隐藏B,
A:
<div class="show_left" @click="onMouseOverO" @mouseleave="onMouseOutO"></div>
B:
<div class="detail_box"
v-if="isShow"
@mouseover="onMouseOverT"
@mouseleave="onMouseOutT">
</div>
逻辑:
<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>