element-plus el-popover 点击其他区域关闭弹出框

场景描述

使用trigger="click"时，也可以做到点击其他区域关闭弹出框，但是当按钮是禁用状态也会显示弹出框，这时候需要使用虚拟触发来解决。

解决方案：

<template>
	<el-tooltip :disabled="hasSelection" effect="dark" content="请勾选" placement="top">
		<span>
			<el-button ref="buttonRef" v-click-outside="hide" :disabled="!hasSelection" type="primary" class="ml15" >
				{{ props.name }}
			</el-button>
		</span>
	</el-tooltip>
	<el-popover
		ref="popoverRef"
		:virtual-ref="buttonRef"
		trigger="click"
		virtual-triggering
		placement="top-start"
		:width="200"
		:height="200"
	>
		<div>
			content
		</div>
	</el-popover>
</template>

<script setup lang="ts" name="popoverUlButton">
import { defineAsyncComponent, reactive, toRefs, onMounted, defineComponent, ref, getCurrentInstance, computed } from 'vue';
import { ElMessage, FormInstance, ClickOutside as vClickOutside } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
//ref
const buttonRef = ref();
const popoverRef = ref();

interface State {
	visible: boolean;
}

const props = defineProps({
	name: {
		type: String,
		default: '',
	},
	hasSelection: {
		type: Boolean,
		default: false,
	},
	dropdownList: {
		type: Array,
		default: [],
	},
	prop: {
		type: String,
		default: '',
	},
});

const state = reactive<State>({
	visible: false,
});


const hide = () => {
	popoverRef.value.hide();
};

onMounted(() => {});

// 暴露给父组件
defineExpose({});
</script>

<script lang="ts">
export default {};
</script>

<style scoped>
</style>

---