<template>
    <div>
        <el-card title="点击空白区域隐藏节点">
            <button
                ref="btnRef"
                @click="toggleDropdown"
            >
                点击显示下拉菜单
            </button>
        </el-card>
        <div
            v-if="isDropdownVisible"
            v-clickOutSide="{
                handler: hideDropdown,
                exclude: btnRef,
            }"
            class="dropdown"
        >
            <!-- 菜单内容 -->
            <p>这是一个下拉菜单</p>
        </div>
    </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue';

const btnRef = ref(null);
const isDropdownVisible = ref(false);

const toggleDropdown = () => {
    isDropdownVisible.value = !isDropdownVisible.value;
};

const hideDropdown = () => {
    isDropdownVisible.value = false;
};
</script>

<style lang="scss" scoped>
.dropdown {
    border: 1px solid #ccc;
    padding: 10px;
    position: absolute;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>
