refactor: 优化钉钉全屏问题

This commit is contained in:
wangjiahao
2025-03-03 18:28:47 +08:00
committed by 王嘉豪
parent d5d3d3ecfa
commit 2e9631c159

View File

@@ -1,11 +1,10 @@
<script lang="ts" setup>
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
const dvMainStore = dvMainStoreWithOut()
import screenfull from 'screenfull'
import { onBeforeUnmount, onMounted, toRefs } from 'vue'
import { useEmitt } from '@/hooks/web/useEmitt'
const dvMainStore = dvMainStoreWithOut()
const props = defineProps({
themes: {
type: String,
@@ -24,38 +23,35 @@ const props = defineProps({
const { themes } = toRefs(props)
const fullscreenChange = () => {
if (screenfull.isEnabled) {
dvMainStore.setFullscreenFlag(screenfull.isFullscreen)
// 编辑界面使用
if (props.showPosition === 'edit') {
if (screenfull.isFullscreen) {
dvMainStore.setEditMode('preview')
} else {
dvMainStore.setEditMode('edit')
}
}
// 大屏编辑使用
if (props.showPosition === 'dvEdit') {
useEmitt().emitter.emit('canvasScrollRestore')
}
const isFullscreen = !!document.fullscreenElement
dvMainStore.setFullscreenFlag(isFullscreen)
// 编辑界面使用
if (props.showPosition === 'edit') {
dvMainStore.setEditMode(isFullscreen ? 'preview' : 'edit')
}
// 大屏编辑使用
if (props.showPosition === 'dvEdit') {
useEmitt().emitter.emit('canvasScrollRestore')
}
}
const toggleFullscreen = () => {
if (screenfull.isEnabled) {
const bodyNode = document.querySelector('body')
screenfull.toggle(bodyNode)
const bodyNode = document.querySelector('body')
if (!document.fullscreenElement) {
bodyNode?.requestFullscreen()
} else {
document.exitFullscreen()
}
}
onMounted(() => {
if (screenfull.isEnabled) {
screenfull.on('change', fullscreenChange)
}
document.addEventListener('fullscreenchange', fullscreenChange)
})
onBeforeUnmount(() => {
screenfull.off('change', fullscreenChange)
document.removeEventListener('fullscreenchange', fullscreenChange)
})
defineExpose({