el-popover嵌套el-popover hover方式不消失
时间: 2024-12-04 17:14:43 浏览: 29
在使用Element UI的el-popover组件时,如果出现嵌套el-popover并且hover方式不消失的情况,可以尝试以下几种解决方法:
1. **手动控制显示和隐藏**:
通过v-model绑定一个布尔值来控制popover的显示和隐藏,而不是依赖于默认的hover事件。
```html
<el-popover
v-model="popoverVisible"
trigger="manual"
placement="top"
@mouseenter.native="popoverVisible = true"
@mouseleave.native="popoverVisible = false">
<el-button slot="reference">Hover me</el-button>
<el-popover
v-model="nestedPopoverVisible"
trigger="manual"
placement="right"
@mouseenter.native="nestedPopoverVisible = true"
@mouseleave.native="nestedPopoverVisible = false">
<div>Nested Popover</div>
<el-button slot="reference">Nested Hover me</el-button>
</el-popover>
</el-popover>
```
```javascript
data() {
return {
popoverVisible: false,
nestedPopoverVisible: false
};
}
```
2. **使用`visible`属性和事件**:
通过控制`visible`属性的值来手动显示和隐藏popover。
```html
<el-popover
:visible="popoverVisible"
trigger="manual"
placement="top"
@mouseenter.native="showPopover"
@mouseleave.native="hidePopover">
<el-button slot="reference">Hover me</el-button>
<el-popover
:visible="nestedPopoverVisible"
trigger="manual"
placement="right"
@mouseenter.native="showNestedPopover"
@mouseleave.native="hideNestedPopover">
<div>Nested Popover</div>
<el-button slot="reference">Nested Hover me</el-button>
</el-popover>
</el-popover>
```
```javascript
methods: {
showPopover() {
this.popoverVisible = true;
},
hidePopover() {
this.popoverVisible = false;
},
showNestedPopover() {
this.nestedPopoverVisible = true;
},
hideNestedPopover() {
this.nestedPopoverVisible = false;
}
}
```
3. **使用`delay`属性**:
通过设置`delay`属性来延迟popover的消失时间,避免快速移动导致的消失问题。
```html
<el-popover
v-model="popoverVisible"
trigger="hover"
placement="top"
:open-delay="200">
<el-button slot="reference">Hover me</el-button>
<el-popover
v-model="nestedPopoverVisible"
trigger="hover"
placement="right"
:open-delay="200">
<div>Nested Popover</div>
<el-button slot="reference">Nested Hover me</el-button>
</el-popover>
</el-popover>
```
```javascript
data() {
return {
popoverVisible: false,
nestedPopoverVisible: false
};
}
```
通过以上方法,可以有效解决el-popover嵌套el-popover时hover方式不消失的问题。
阅读全文