父div和内部的子div分别绑定了el-popover,使用hover的形式被触发,如何在hover到子div的时候让父div的el-popper消失?
时间: 2024-03-16 13:45:07 浏览: 123
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
5星 · 资源好评率100%
可以使用 `v-if` 或 `v-show` 来控制父 `div` 的 `el-popover` 是否显示。当鼠标悬停在子 `div` 上时,使用 `@mouseover` 事件触发一个方法,在该方法中将控制父 `div` 的 `v-if` 或 `v-show` 设置为 `false`,以隐藏父 `div` 的 `el-popover`。具体代码如下:
```
<template>
<div>
<div v-el:parent-popover v-popover:parent-popover.hover>
父div
<div v-el:child @mouseover="hideParentPopover" v-popover:child-popover.hover>
子div
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
hideParentPopover() {
this.$refs['parent-popover'].visible = false;
}
}
}
</script>
```
在上面的代码中,父 `div` 和子 `div` 分别绑定了 `el-popover`,并使用了 `hover` 形式触发。在父 `div` 上使用了 `v-el:parent-popover` 来获取该元素的引用,在子 `div` 上使用了 `v-el:child` 来获取该元素的引用。当鼠标悬停在子 `div` 上时,会触发 `hideParentPopover` 方法,在该方法中将父 `div` 的 `el-popover` 设置为不可见,以达到隐藏的效果。
阅读全文