el-popover点击外部关闭
时间: 2023-08-16 15:15:18 浏览: 461
C知道:el-popover 是饿了么团队开发的一个弹出框组件,它提供了一些属性可以控制点击外部区域关闭的功能。如果你想让 el-popover 在点击外部区域时关闭,你可以使用 `trigger` 属性来设置触发方式为 "click",然后再设置 `hide-on-click` 属性为 true。这样就能实现点击外部区域关闭 el-popover 的效果。
以下是一个示例的代码:
```html
<template>
<div>
<el-button ref="target" type="primary">点击我弹出 popover</el-button>
<el-popover
placement="bottom"
title="标题"
width="200"
trigger="click"
hide-on-click
v-model="popoverVisible"
:reference="targetRef"
>
<p>这是一个 el-popover 的内容。</p>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
popoverVisible: false,
targetRef: null,
};
},
mounted() {
this.targetRef = this.$refs.target.$el;
},
};
</script>
```
在上面的代码中,我们通过 `trigger` 属性将触发方式设置为点击("click"),然后使用 `hide-on-click` 属性来实现点击外部区域关闭的功能。你可以根据自己的需求进行调整和修改。希望能对你有所帮助!
阅读全文