全屏

src/components/FullscreenToggle/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div ref="fullscreenContainer">
+    <slot :toggle="toggleFullscreen" :isFullscreen="isFullscreen"></slot> <!-- 这里放你的图表或其他内容 -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FullscreenToggle',
+  data () {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted () {
+    this.initFullscreenListeners()
+  },
+  beforeDestroy () {
+    this.removeFullscreenListeners()
+  },
+  methods: {
+    // 检查是否全屏
+    checkFullscreen () {
+      return (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+      )
+    },
+
+    // 进入全屏
+    enterFullscreen () {
+      const container = this.$refs.fullscreenContainer
+      if (!container) return
+
+      if (container.requestFullscreen) {
+        container.requestFullscreen().catch((err) => console.error(err))
+      } else if (container.webkitRequestFullscreen) {
+        container.webkitRequestFullscreen()
+      } else if (container.msRequestFullscreen) {
+        container.msRequestFullscreen()
+      }
+    },
+
+    // 退出全屏
+    exitFullscreen () {
+      if (document.exitFullscreen) {
+        document.exitFullscreen().catch((err) => console.error(err))
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen()
+      }
+    },
+
+    // 切换全屏
+    toggleFullscreen () {
+      if (this.checkFullscreen()) {
+        this.exitFullscreen()
+      } else {
+        this.enterFullscreen()
+      }
+    },
+
+    // 监听全屏变化
+    handleFullscreenChange () {
+      this.isFullscreen = this.checkFullscreen()
+    },
+
+    // 监听 ESC 键
+    handleKeyDown (e) {
+      if (e.key === 'Escape' && this.isFullscreen) {
+        this.exitFullscreen()
+      }
+    },
+
+    // 初始化监听
+    initFullscreenListeners () {
+      document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('msfullscreenchange', this.handleFullscreenChange)
+      document.addEventListener('keydown', this.handleKeyDown)
+    },
+
+    // 移除监听
+    removeFullscreenListeners () {
+      document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('msfullscreenchange', this.handleFullscreenChange)
+      document.removeEventListener('keydown', this.handleKeyDown)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/utils/fullscreen.js

@@ -1,55 +0,0 @@
-// 进入全屏
-export const requestFullscreen = (element) => {
-  if (element.requestFullscreen) {
-    element.requestFullscreen()
-  } else if (element.webkitRequestFullscreen) {
-    element.webkitRequestFullscreen()
-  } else if (element.msRequestFullscreen) {
-    element.msRequestFullscreen()
-  }
-}
-
-// 退出全屏
-export const exitFullscreen = () => {
-  if (!document) {
-    return
-  }
-
-  if (!isFullscreen()) {
-    return
-  }
-
-  if (document.exitFullscreen) {
-    document.exitFullscreen()
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen()
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen()
-  }
-}
-
-// 检测全屏状态
-export const isFullscreen = (element) => {
-  if (!document) return false
-  return (
-    (document.fullscreenElement === element) ||
-    (document.webkitFullscreenElement === element) ||
-    (document.msFullscreenElement === element)
-  )
-}
-
-/**
- * 监听 ESC 键退出全屏
- */
-export const listenForEscExit = (fn) => {
-  if (!document) return
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
-      fn()
-      document.removeEventListener('keydown', handleKeyDown) // 移除监听
-    }
-  }
-
-  document.addEventListener('keydown', handleKeyDown)
-}

src/views/dataChart/dataChartEdit.vue

@@ -12,19 +12,21 @@
     </div>
 
     <div class="chart-content d-flex heightFull">
-      <div class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
-        <div v-if="!empty" class="position-absolute" style="right: 10px; top: 80px; z-index: 999">
-          <v-btn
-              icon
-              color="primary"
-              @click="setFullscreen"
-            >
-              <v-icon>{{ fullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
-            </v-btn>
-        </div>
-        <MEmpty v-if="empty"></MEmpty>
-        <InitChart ref="chart" class="heightFull widthFull"></InitChart>
-      </div>
+      <FullscreenToggle class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
+        <template v-slot="{ toggle, isFullscreen }">
+          <div v-if="!empty" class="position-absolute" style="right: 10px; top: 80px; z-index: 999">
+            <v-btn
+                icon
+                color="primary"
+                @click="toggle"
+              >
+                <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
+              </v-btn>
+          </div>
+          <MEmpty v-if="empty"></MEmpty>
+          <InitChart ref="chart" class="heightFull widthFull"></InitChart>
+        </template>
+      </FullscreenToggle>
       <DataChartEditChat @render="onRender"></DataChartEditChat>
     </div>
   </div>
@@ -37,20 +39,18 @@ import * as Charts from './utils/options.js'
 import DataChartEditChat from './dataChartEditChat.vue'
 import InitChart from '@/charts/initChart'
 import { cloneDeep } from 'lodash'
-import {
-  requestFullscreen,
-  exitFullscreen
-} from '@/utils/fullscreen'
+
+import FullscreenToggle from '@/components/FullscreenToggle'
 export default {
   name: 'dataChartEdit',
   components: {
     DataChartEditChat,
     InitChart,
-    MEmpty
+    MEmpty,
+    FullscreenToggle
   },
   data () {
     return {
-      fullscreen: false,
       Charts,
       chart: null,
       chartsOpt: {
@@ -75,15 +75,6 @@ export default {
       this.chartsOpt.key = key
       this.setData()
     },
-    setFullscreen () {
-      this.fullscreen = !this.fullscreen
-      const $el = this.$refs.box
-      if (this.fullscreen) {
-        requestFullscreen($el)
-      } else {
-        exitFullscreen($el)
-      }
-    },
     onRender ({ type, data }) {
       this.chartsOpt.config.xAxisData = type
       this.chartsOpt.data = data
@@ -120,8 +111,6 @@ export default {
       if (_option.xAxis?.data) {
         _option.xAxis.data = config?.xAxisData ?? data[0].map((e, i) => i)
       }
-      console.log(_option)
-      console.log(this.chart)
       this.chart.setOption(_option, true)
       this.chart.hideLoading()
     }