edit dropdownMenu show or hide

DOCS/UPADTE.md

@@ -3,6 +3,10 @@
 > 此处记录项目的开发进度  
 > (这会让项目开发变得紧紧有条)
 
+2019-04-02
+
+* view dropdownMenu 显示与隐藏方案调整，优化体验
+
 2019-04-01
 
 * view 修改目录结构，修改控件名称

View/src/components/system/DropdownMenu/dropdown-menu.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="dropdownMenu" style="cursor: default;" class="border-0" @blur="show = false" tabindex="0" contenteditable :model="show">
+    <div id="dropdownMenu" style="cursor: default;" class="border-0" :model="show">
         <a id="dropdownMenuButton" class="btn btn-dark d-inline-flex" style="cursor: default;" href="#" role="button" @click="show = !show">
             <i class="fas fa-bars align-self-center px-1"></i>
             <font class="align-self-center px-1">menu</font>
@@ -23,6 +23,34 @@ export default {
     components: {
         DropdownMenuTooltip,
     },
+    methods: {
+        bindHindeEvents: function () {
+            document.body.addEventListener('mousedown', this.hindeMenu )
+            document.body.addEventListener('mousewheel', this.hindeMenu )
+        },
+        unbindHindeEvents: function () {
+            document.body.removeEventListener('mousedown', this.hindeMenu )
+            document.body.removeEventListener('mousewheel', this.hindeMenu )
+        },
+        hindeMenu: function (event) {
+            const e = event.target
+            // 判断鼠标点击位置是否在菜单内，如果是则不隐藏，如果不是则隐藏
+            this.isChildById(e, 'dropdownMenuTooltip')
+                
+        },
+        isChildById: function (e, id) {
+            if (!(e || e.nodeName) || ['#document', 'HTML', 'BODY'].includes(e.nodeName)) 
+                return this.show = false
+            e = e.parentNode
+            if (e.id && e.id == id) return
+            this.isChildById(e, id)
+        },
+    },
+    watch: {
+        show: function (newValue) {
+            newValue ? this.bindHindeEvents() : this.unbindHindeEvents()
+        }
+    }
 }
 </script>