123

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -20,8 +20,9 @@
 					v-if="v.child"
 					class="child"
 					v-show="v.showChild"
-					:bind-id="v.name"
 					v-clidk-besides="() => (v.showChild = false)"
+					:bind-id="v.name"
+					:stop-besides="!v.showChild"
 				>
 					<div v-for="(v_, i_) in v.child" :key="i_" @click="onClickTool(v_, v)">
 						<span v-show="tool === v_.name" class="dui">

src/directives/clidk-besides.js

@@ -1,16 +1,18 @@
 // 点击外部区域触发事件
-// 用法：v-clidk-besides="() => {}"
 // 说明：点击外部区域触发事件，不包括点击元素本身
-// 注意：点击元素本身或者属性bind-id相同元素不会触发事件
+// 用法：v-clidk-besides="() => {}"
+// 属性：bind-id，点击元素的id，用于判断是否点击了元素本身
+// 属性：stop-besides="true"，"true"时候点击不触发事件
 export default {
 	name: 'clidk-besides',
 	mounted(el, binding) {
-		console.log("mounted", el, binding);
 		const call = binding.value
 		const id = el.getAttribute("bind-id");
 		window.addEventListener("touchstart", fun, true);
 		window.addEventListener("mousedown", fun, true);
+		el.clidkBesidesFun = fun
 		function fun(e) {
+			if (el.getAttribute("stop-besides") == "true") return
 			var k = true;
 			iterator(e.target);
 			if (k) call && call();
@@ -24,4 +26,8 @@ export default {
 			}
 		}
 	},
+	unmounted(el) {
+		window.removeEventListener("touchstart", el.clidkBesidesFun, true);
+		window.removeEventListener("mousedown", el.clidkBesidesFun, true);
+	}
 };