vue3+ts实现双击全屏效果

最新推荐文章于 2024-07-12 10:43:17 发布

夜雨疯行

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量100

点赞数 2

文章标签： javascript 前端开发语言 typescript vue.js

本文链接：https://blog.csdn.net/qq_36462217/article/details/139857764

版权

vue3+ts实现双击全屏效果,兼容F11全屏效果和Esc按键退出全屏效果

<template>
监听双击事件，切换是否全屏状态 全屏添加样式dbStyle
  <div @dblclick="handleDblClick" :class="TData.isBig ?'dbStyle' : ''" width="1920" height="1080"></div>
</template>
<script setup lang="ts">
const TData=reactive({
  isBig:false    //是否全屏
})
//监听全屏状态改变样式
watch(
  ()=>document.fullscreenElement,
  val=>{
    if(val){
      TData.isBig=false
    }else{
      TData.isBig=true
    }
  }
)
//点击切换全屏状态
const handleDblClick = () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    document.documentElement.requestFullscreen();
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}
</script>
<style scoped lang="scss">
.dbStyle{
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>