el-popover 点击界面其他部分关闭el-popover
时间: 2023-11-14 08:07:15 浏览: 70
可以通过设置 `popper-class` 属性来实现点击界面其他部分关闭 `el-popover`。具体做法是在 `popper-class` 中添加一个点击事件监听器,当点击事件发生时,关闭 `el-popover`。
示例代码如下:
```html
<el-popover
popper-class="my-popper"
trigger="click"
content="这是一个 el-popover"
>
<button>点击我</button>
</el-popover>
```
```css
.my-popper {
/* 设置 popper 的样式 */
}
.my-popper .el-popover__reference {
/* 设置触发元素的样式 */
}
.my-popper .el-popover__content {
/* 设置弹出内容的样式 */
}
.my-popper .el-popover__wrapper {
/* 设置弹出框的样式 */
}
.my-popper .el-popover__wrapper .popper__arrow {
/* 设置箭头的样式 */
}
.my-popper .el-popover__wrapper .popper__arrow::before {
/* 设置箭头的样式 */
}
.my-popper .el-popover__wrapper .popper__arrow::after {
/* 设置箭头的样式 */
}
/* 添加点击事件监听器 */
.my-popper.show-x-enter-active,
.my-popper.show-x-leave-active {
transition: opacity 0.3s;
}
.my-popper.show-x-enter,
.my-popper.show-x-leave-to {
opacity: 0;
}
.my-popper.show-x-leave,
.my-popper.show-x-enter-to {
opacity: 1;
}
/* 点击事件监听器 */
.my-popper.show-x-enter-active,
.my-popper.show-x-leave-active {
transition: opacity 0.3s;
}
.my-popper.show-x-enter,
.my-popper.show-x-leave-to {
opacity: 0;
}
.my-popper.show-x-leave,
.my-popper.show-x-enter-to {
opacity: 1;
}
/* 点击事件监听器 */
document.addEventListener('click', function (event) {
var popper = document.querySelector('.my-popper');
var target = event.target;
if (!popper.contains(target)) {
popper.style.display = 'none';
}
});
```