vue3: screenfull(全屏) 原理及方案分析
vue3: screenfull(全屏) 原理及方案分析
·
vue3: screenfull 原理及方案分析
原理
对于screenfull
而言,浏览器本身提供了对应的api
:
1.Document.exitFullscreen()
:用于请求从全屏模式切换到窗口模式
2.Element.requestFullscreen()
: 用于请求浏览器将特定元素(甚至延伸到它的后代元素)置为全屏模式
ex: 我们可以通过 document.getElementById('app').requestFullscreen()
在获取 id=app
的 DOM
之后,把该区域置为全屏,但该方法存在一些小的问题,比如 appmin
区域背景色改变
所以通常我们不会直接使用该 API
来实现全屏,而是使用它的包装库 screenfull
方案
1.下载依赖 screenfull
npm i screenfull
2.创建组件 Screenfull.vue
<template>
<div>
<svg-icon
:icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
@click="onToggle"
/>
</div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } 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>
更多推荐
已为社区贡献1条内容
所有评论(0)