窗口遮罩和页面影藏时候暂停节拍器

src/components/Metronome/MetronomeBox.vue

@@ -1,9 +1,11 @@
 <template>
+  <div v-if="isDrag" class="metronomeMinConMask"></div>
   <div
     v-if="windowMet"
     class="metronomeMinCon"
     :class="[metronomeMinConBoxClass]"
     :style="metronomeMinConDragData.styleDrag.value"
+    @mousedown="hanldeMetronomeMinmousedown"
   >
     <div class="topMetronomeMin">
       <img
@@ -75,7 +77,7 @@
 
 <script setup lang="ts">
 import { NModal } from 'naive-ui';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted} from 'vue';
 import Metronome from './Metronome.vue';
 import { useUserStore } from '@/store/modules/users';
 import useDrag from '@/hooks/useDrag';
@@ -107,7 +109,18 @@ watch(metronomeShow, () => {
 });
 const playState = ref<'play' | 'pause'>('pause');
 const rotateWagTime = ref((60 * 2) / 90);
-
+onMounted(() => {
+  document.addEventListener('visibilitychange', documentHidePause);
+});
+onUnmounted(() => {
+  document.removeEventListener('visibilitychange', documentHidePause);
+});
+function documentHidePause() {
+  if (document.visibilityState === 'hidden') {
+    metronomeDom.value?.pausePlay();
+    playState.value = 'pause';
+  }
+}
 function handleCloseMet() {
   metronomeShow.value = false;
   windowMet.value = false;
@@ -132,9 +145,26 @@ const metronomeMinConDragData = useDrag(
   windowMet,
   users.info.id
 );
+const isDrag = ref(false); // 拖动metronomeMin的时候防止iframe
+function hanldeMetronomeMinmousedown() {
+  isDrag.value = true;
+  document.addEventListener('mouseup', onMouseup);
+  function onMouseup() {
+    isDrag.value = false;
+    document.removeEventListener('mouseup', onMouseup);
+  }
+}
 </script>
 
 <style lang="less" scoped>
+.metronomeMinConMask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 9;
+}
 .metronomeMinCon {
   position: fixed;
   left: 12Px;