el-popover 设置失焦隐藏
要实现 el-popover 在失焦时隐藏,可以使用以下方法:
- 使用 v-model 控制 popover 的显示与隐藏状态。
<el-popover v-model="popoverVisible" @show="popoverVisible = true" @hide="popoverVisible = false">
<!-- popover 内容 -->
</el-popover>
- 在外层容器上监听失焦事件,并在失焦时隐藏 popover。
<div @blur="hidePopover">
<!-- 触发 popover 的元素 -->
</div>
- 在 Vue 实例的 methods 中定义 hidePopover 方法,用于隐藏 popover。
data() {
return {
popoverVisible: false
};
},
methods: {
hidePopover() {
setTimeout(() => {
this.popoverVisible = false;
}, 200); // 延时一段时间以确保点击 popover 内容不会立即触发失焦事件
}
}
这样,当外层容器失焦时,会调用 hidePopover 方法隐藏 popover。同时,点击 popover 内容不会触发失焦事件,因为延时了一段时间才隐藏 popover
原文地址: https://www.cveoy.top/t/topic/ikTp 著作权归作者所有。请勿转载和采集!