feat: 点击空白处关闭弹窗或者下拉菜单

src/directives/clickOutSide/index.ts

@@ -0,0 +1,41 @@
+// 自定义指令点击非自身事件（空白处）
+export const clickOutSide = {
+    beforeMount(el: any, binding: any) {
+        function documentHandler(e: any) {
+            console.log(el); //绑定v-click-outside的元素
+            console.log(e.target); //点击的元素
+            console.log(binding); //绑定指令的对象
+
+            // 判断点击的元素是否是自身或者内部元素(因为点自己，或者自己内部的元素，是不能关闭弹窗的，只有点击页面其他空白处才能关闭)
+            if (el.contains(e.target) || el === e.target) {
+                return false;
+            }
+
+            // 判断点击的元素是否是排除的元素，因为不排除点击的元素，也会触发binding.value.handler => hideDropdown(即关闭弹窗，这就导致弹窗永远一打开就被关闭了)
+            console.log(binding.value.exclude === e.target);
+            if (binding.value.exclude && binding.value.exclude === e.target) {
+                return false;
+            }
+            /**
+             * 总结有两种情况不做任何操作
+             * 1. 点击的元素是自身或者内部元素
+             * 2. 点击的元素是排除的元素（即点击元素自身）
+             */
+
+            // 判断指令中是否绑定了函数
+            console.log('判断指令中是否绑定了函数', binding);
+            if (binding.value.handler) {
+                console.log('有绑定函数，执行函数');
+                // 有绑定函数，则执行函数
+                binding.value.handler(e);
+            }
+        }
+        // 给当前元素绑定个私有变量，方便在unmounted中可以解除事件监听
+        el.__vueClickOutside__ = documentHandler;
+        document.addEventListener('click', documentHandler);
+    },
+    unmounted(el: any) {
+        document.removeEventListener('click', el.__vueClickOutside__);
+        delete el.__vueClickOutside__;
+    },
+};

src/directives/index.ts

@@ -1,6 +1,8 @@
-export * from "./auth";
-export * from "./copy";
-export * from "./longpress";
-export * from "./optimize";
-export * from "./perms";
-export * from "./ripple";
+export * from './auth';
+export * from './copy';
+export * from './longpress';
+export * from './optimize';
+export * from './perms';
+export * from './ripple';
+
+export * from './clickOutSide';

src/router/modules/demo.ts

@@ -13,6 +13,10 @@ const titleArr = [
         key: 'importOrExportExcel',
         title: '导入导出excel',
     },
+    {
+        key: 'clickOutSide',
+        title: '点击空白处关闭弹窗或者下拉菜单',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/clickOutSide/index.vue

@@ -0,0 +1,48 @@
+<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>

src/views/demo/tools/components/cmp.vue

@@ -1,15 +1,9 @@
 <template>
-    <el-card> 基础模版 </el-card>
+    <el-card> 测试路由生成是否包含components </el-card>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue';
-
-defineOptions({
-    name: 'DemoTools',
-});
-
-const page = ref({});
 </script>
 
 <style lang="scss" scoped></style>