diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue index c28e3a78..4c24b723 100644 --- a/src/views/Screen/BaseView.vue +++ b/src/views/Screen/BaseView.vue @@ -5,6 +5,7 @@ :slideHeight="slideHeight" :animationIndex="animationIndex" :turnSlideToId="turnSlideToId" + :manualExitFullscreen="manualExitFullscreen" @mousewheel="$event => mousewheelListener($event)" @touchstart="$event => touchStartListener($event)" @touchend="$event => touchEndListener($event)" @@ -43,7 +44,7 @@ - + @@ -59,11 +60,11 @@ import { defineComponent, PropType, ref } from 'vue' import { storeToRefs } from 'pinia' import { useSlidesStore } from '@/store' import { ContextmenuItem } from '@/components/Contextmenu/types' -import { enterFullscreen, exitFullscreen } from '@/utils/fullscreen' +import { enterFullscreen } from '@/utils/fullscreen' import useScreening from '@/hooks/useScreening' import useExecPlay from './hooks/useExecPlay' import useSlideSize from './hooks/useSlideSize' -import useFullscreenState from './hooks/useFullscreenState' +import useFullscreen from './hooks/useFullscreen' import ScreenSlideList from './ScreenSlideList.vue' import SlideThumbnails from './SlideThumbnails.vue' @@ -103,7 +104,7 @@ export default defineComponent({ const { slideWidth, slideHeight } = useSlideSize() const { exitScreening } = useScreening() - const { fullscreenState } = useFullscreenState() + const { fullscreenState, manualExitFullscreen } = useFullscreen() const rightToolsVisible = ref(false) const writingBoardToolVisible = ref(false) @@ -184,7 +185,7 @@ export default defineComponent({ fullscreenState, exitScreening, enterFullscreen, - exitFullscreen, + manualExitFullscreen, } }, }) diff --git a/src/views/Screen/PresenterView.vue b/src/views/Screen/PresenterView.vue index 7e834fc5..39e4eaed 100644 --- a/src/views/Screen/PresenterView.vue +++ b/src/views/Screen/PresenterView.vue @@ -3,7 +3,7 @@
普通视图
画笔
-
+
{{ fullscreenState ? '退出全屏' : '全屏' }} @@ -19,6 +19,7 @@ :slideHeight="slideHeight" :animationIndex="animationIndex" :turnSlideToId="turnSlideToId" + :manualExitFullscreen="manualExitFullscreen" @mousewheel="$event => mousewheelListener($event)" @touchstart="$event => touchStartListener($event)" @touchend="$event => touchEndListener($event)" @@ -70,13 +71,13 @@ import { computed, defineComponent, nextTick, ref, watch, PropType } from 'vue' import { storeToRefs } from 'pinia' import { useSlidesStore } from '@/store' import { ContextmenuItem } from '@/components/Contextmenu/types' -import { enterFullscreen, exitFullscreen } from '@/utils/fullscreen' +import { enterFullscreen } from '@/utils/fullscreen' import { parseText2Paragraphs } from '@/utils/textParser' import useScreening from '@/hooks/useScreening' import useLoadSlides from '@/hooks/useLoadSlides' import useExecPlay from './hooks/useExecPlay' import useSlideSize from './hooks/useSlideSize' -import useFullscreenState from './hooks/useFullscreenState' +import useFullscreen from './hooks/useFullscreen' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' import ScreenSlideList from './ScreenSlideList.vue' @@ -116,7 +117,7 @@ export default defineComponent({ const { slideWidth, slideHeight } = useSlideSize(slideListWrapRef) const { exitScreening } = useScreening() const { slidesLoadLimit } = useLoadSlides() - const { fullscreenState } = useFullscreenState() + const { fullscreenState, manualExitFullscreen } = useFullscreen() const remarkFontSize = ref(16) const currentSlideRemark = computed(() => { @@ -211,7 +212,7 @@ export default defineComponent({ exitScreening, fullscreenState, enterFullscreen, - exitFullscreen, + manualExitFullscreen, writingBoardToolVisible, } }, diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue index b0aa0625..397e78df 100644 --- a/src/views/Screen/ScreenElement.vue +++ b/src/views/Screen/ScreenElement.vue @@ -54,6 +54,10 @@ export default defineComponent({ type: Function as PropType<(id: string) => void>, required: true, }, + manualExitFullscreen: { + type: Function as PropType<() => void>, + required: true, + }, }, setup(props) { const currentElementComponent = computed(() => { @@ -84,9 +88,14 @@ export default defineComponent({ // 打开元素绑定的超链接 const openLink = () => { const link = props.elementInfo.link - if (link) { - if (link.type === 'web') window.open(link.target) - else if (link.type === 'slide') props.turnSlideToId(link.target) + if (!link) return + + if (link.type === 'web') { + props.manualExitFullscreen() + window.open(link.target) + } + else if (link.type === 'slide') { + props.turnSlideToId(link.target) } } diff --git a/src/views/Screen/ScreenSlide.vue b/src/views/Screen/ScreenSlide.vue index 0ae7138a..6a6fdcdd 100644 --- a/src/views/Screen/ScreenSlide.vue +++ b/src/views/Screen/ScreenSlide.vue @@ -15,6 +15,7 @@ :elementIndex="index + 1" :animationIndex="animationIndex" :turnSlideToId="turnSlideToId" + :manualExitFullscreen="manualExitFullscreen" />
@@ -51,6 +52,10 @@ export default defineComponent({ type: Function as PropType<(id: string) => void>, required: true, }, + manualExitFullscreen: { + type: Function as PropType<() => void>, + required: true, + }, }, setup(props) { const { viewportRatio } = storeToRefs(useSlidesStore()) diff --git a/src/views/Screen/ScreenSlideList.vue b/src/views/Screen/ScreenSlideList.vue index ac1f9ada..c29b1914 100644 --- a/src/views/Screen/ScreenSlideList.vue +++ b/src/views/Screen/ScreenSlideList.vue @@ -27,6 +27,7 @@ :scale="scale" :animationIndex="animationIndex" :turnSlideToId="turnSlideToId" + :manualExitFullscreen="manualExitFullscreen" />
@@ -63,6 +64,10 @@ export default defineComponent({ type: Function as PropType<(id: string) => void>, required: true, }, + manualExitFullscreen: { + type: Function as PropType<() => void>, + required: true, + }, }, setup(props) { const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore()) diff --git a/src/views/Screen/hooks/useFullscreen.ts b/src/views/Screen/hooks/useFullscreen.ts new file mode 100644 index 00000000..27fa27e6 --- /dev/null +++ b/src/views/Screen/hooks/useFullscreen.ts @@ -0,0 +1,34 @@ +import { onMounted, onUnmounted, ref } from 'vue' +import { isFullscreen, exitFullscreen } from '@/utils/fullscreen' +import useScreening from '@/hooks/useScreening' + +export default () => { + const fullscreenState = ref(true) + const escExit = ref(true) + + const { exitScreening } = useScreening() + + const windowResizeListener = () => { + fullscreenState.value = isFullscreen() + if (!fullscreenState.value && escExit.value) exitScreening() + + escExit.value = true + } + + onMounted(() => { + fullscreenState.value = isFullscreen() + window.addEventListener('resize', windowResizeListener) + }) + onUnmounted(() => window.removeEventListener('resize', windowResizeListener)) + + const manualExitFullscreen = () => { + if (!fullscreenState.value) return + escExit.value = false + exitFullscreen() + } + + return { + fullscreenState, + manualExitFullscreen, + } +} \ No newline at end of file diff --git a/src/views/Screen/hooks/useFullscreenState.ts b/src/views/Screen/hooks/useFullscreenState.ts deleted file mode 100644 index 00acd430..00000000 --- a/src/views/Screen/hooks/useFullscreenState.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { onMounted, onUnmounted, ref } from 'vue' -import { isFullscreen } from '@/utils/fullscreen' - -export default () => { - const fullscreenState = ref(true) - - const windowResizeListener = () => fullscreenState.value = isFullscreen() - - onMounted(() => window.addEventListener('resize', windowResizeListener)) - onUnmounted(() => window.removeEventListener('resize', windowResizeListener)) - - return { - fullscreenState, - } -} \ No newline at end of file