浏览代码

“场景导览”按钮高亮机制优化

任一存 2 年之前
父节点
当前提交
a1f41154d5
共有 1 个文件被更改,包括 21 次插入1 次删除
  1. 21 1
      src/views/gui/menu.vue

+ 21 - 1
src/views/gui/menu.vue

@@ -80,7 +80,6 @@
               data-original-title="导览"
               rel="tooltip"
               title="场景导览"
-              @click="isGuide = !isGuide"
             >
               <!-- 鼠标移入的显示 -->
               <!-- <div class="hoverTit">导览列表</div> -->
@@ -363,6 +362,7 @@ export default {
       isGuide: false,
       isSelectingFloor: false,
       floorBtnCollapseTimeoutId: null,
+      mutationObserver: null,
     }
   },
   computed: {
@@ -383,6 +383,26 @@ export default {
     }
   },
   mounted() {
+    // 创建一个观察器实例并传入回调函数
+    this.mutationObserver = new MutationObserver((mutationsList, observer) => {
+      for (let mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          if (mutation.target.classList.contains('open')) {
+            this.isGuide = true
+          } else {
+            this.isGuide = false
+          }
+        }
+      }
+    })
+
+    // 选择需要观察变动的节点
+    const targetNode = document.querySelector('.pinBottom.left')
+    // 以上述配置开始观察目标节点
+    this.mutationObserver.observe(targetNode, { attributes: true, childList: false, subtree: false })
+  },
+  beforeDistroy() {
+    this.mutationObserver.disconnect()
   },
   methods: {
     switchBGM(flag) {