js实现全屏功能

Abao

已于 2024-08-13 19:53:54 修改

阅读量1.9k

点赞数 4

文章标签： javascript 前端 html

于 2024-07-19 15:49:07 首次发布

本文链接：https://blog.csdn.net/weixin_72439307/article/details/140551833

版权

先绑定方法

<span
                  :class="isFullScreen ? 'ti-suoxiao' : 'ti-quanping'"
                  @click="toggleFullScreen"
                  style="font-size: 12px; margin-left: 1vw"
                >
                </span>

添加监听实现方法

const isFullScreen = ref(false)
// 监听全屏改变事件
function handleFullScreenChange() {
  isFullScreen.value = document.fullscreenElement !== null
}
// 进入或退出全屏
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    // 请求全屏
    document.documentElement.requestFullscreen()
  } else {
    // 退出全屏
    document.exitFullscreen()
  }
}
// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullScreenChange)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullScreenChange)
})