场景描述
使用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>