需求:用户点击按钮,弹出框出现,弹出框里有确认&取消按钮,点击确认&取消&其他区域,弹出框消失。
文档上是这样写的
但是如果绑定了visible,那么弹出框所有的弹出隐藏都必须手动控制 ,也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。
可以通过绑定弹出框的ref,来通过ref的value.hide()实现手动隐藏。
<template>
<el-popover trigger="click" ref="popoverRef" placement="top">
<p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0">
<el-button size="small" text @click="handleClose()">cancel</el-button>
<el-button size="small" type="primary" @click="handleClose()">confirm</el-button>
</div>
<template #reference>
<el-button>Delete</el-button>
</template>
</el-popover>
</template>
<script setup>
import { defineComponent, ref } from 'vue';
//获取弹出框组件的ref
const popoverRef = ref(null);
// 关闭
const handleClose = () => {
//利用hiden()来隐藏。
popoverRef.value.hide();
};
</script>