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

Posted 2023-03-09 嘴巴嘟嘟

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

我们来看一下代码：

<script setup lang="ts">
import  ref  from "vue";
import  PopoverInstance  from "element-plus";
const visible = ref(false);
const popoverRef = ref<PopoverInstance | null>(null);
const checkList = ref([]);
const handelClick = () => 
	if (popoverRef.value) 
		popoverRef.value?.hide();
	
;
</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 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>