diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue index 83c8bcd..11f25a7 100644 --- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue +++ b/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" >
diff --git a/src/directives/clidk-besides.js b/src/directives/clidk-besides.js index 503b4d5..c15dd24 100644 --- a/src/directives/clidk-besides.js +++ b/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); + } }; \ No newline at end of file