element plus中组件Popover弹出框点击内容区关闭弹出框的解决办法

最近项目中多次用到了Popover弹出框，在使用时，也遇到了一些坑，比如如何控制显示和隐藏，以及在popover里面增加一些动能。下面是我做的一个demo
会出现的问题：
1、 点击里面的Checkbox popover会关闭
2、 点击confirm按钮不会关闭

我们来看一下代码：

<script setup lang="ts">
import { ClickOutside as vClickOutside } from 'element-plus'
import { ref } from "vue";
import { PopoverInstance } from "element-plus";
const visible = ref(false);
const timePickerValue = ref()
const popoverRef = ref<PopoverInstance | null>(null);
const checkList = ref([]);
const handelClick = () => {
	if (popoverRef.value) {
		popoverRef.value?.hide();
	}
};
const outside = () => {
    visible.value = false;
}
</script>

<template>
	<el-popover ref="popoverRef" placement="top" trigger="click" :width="160">
		<el-checkbox-group v-model="checkList">
			<el-checkbox label="Option A" />
			<el-checkbox label="Option B" />
			<el-checkbox label="Option C" />
		</el-checkbox-group>
		<div class="mine-item">
                <span>自定义:</span>
                <el-date-picker
                    v-model="timePickerValue"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="起始日期"
                    end-placeholder="结束日期"
                />
            </div>
		<div style="text-align: right; margin: 0">
			<el-button size="small" text @click="visible = false"
				>cancel</el-button
			>
			<el-button size="small" type="primary" @click="handelClick"
				>confirm</el-button
			>
		</div>
		<template #reference>
			<el-button @click="visible = true">testa</el-button>
		</template>
	</el-popover>
</template>

<style scoped></style>