screenfull组件:主要使用的是浏览器的2个API:Document.exitFullscreen():该方法用于请求从全屏模式切换到窗口模式;
Element.requestFullscreen():该方法用于请求浏览器(user agent)将特定元素(甚至延伸到它的后代元素)置为全屏模式。
当通过document.getElementById(‘app’).requestFullscreen()在获取id=app的DOM之后,把该区域置为全屏
这种方法存在一定的问题(内容区域的AppMain)区域背景为黑色。
实现全屏显示模式,通常可以使用包装库:screenfull。
一、实现
1、安装screenfull
2、创建全屏组件
1 2 3 4 5 6 7 8
| <template> <div> <svg-icon :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="onToggle" /> </div> </template>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <script setup> import { ref, onMounted, onUnmounted } from 'vue' import screenfull from 'screenfull'
const isFullscreen = ref(false)
const change = () => { isFullscreen.value = screenfull.isFullscreen }
const onToggle = () => { screenfull.toggle() }
onMounted(() => { screenfull.on('change', change) })
onUnmounted(() => { screenfull.off('change', change) }) </script>
|
3、引入全屏组件
1
| <screenfull class="right-menu-item hover-effect" />
|
1
| import Screenfull from '@/components/Screenfull'
|