vue3点击按钮实现全屏和取消全屏效果

出现的问题1:用fullscreenchange监听全屏状态的改变时,发现在Chrome浏览器中,无法正确触发该事件,这个问题是由于Chrome浏览器的缺陷引起的。Chrome使用了Webkit引擎,在处理全屏模式时存在一些不一致性。具体来说,Chrome没有正确地实现fullscreenchange事件

解决办法:用resize替换,监听页面的resize事件,根据页面高度是否等于全屏高度判断是否处于全屏状态,具体代码如下:

<template>
   <el-button type="primary" @click="screen">{{ fullscreenText }}</el-button>
</template>
const fullscreen = ref(false)
const fullscreenText = ref('全屏')
if (window.innerHeight === window.screen.height) {
//判断初始化后,是否处于全屏状态
  fullscreen.value = true
  fullscreenText.value = '取消全屏'
}
onMounted(() => {
  //监听页面是否全屏,fullscreen为true代表全屏状态,
  window.addEventListener('resize', () => {
    if (window.innerHeight === window.screen.height) {
      //全屏
      fullscreen.value = true
      fullscreenText.value = '取消全屏'
    } else {
      fullscreen.value = false
      fullscreenText.value = '全屏'
    }
  })
})

具体点击全屏的代码:


const screen = () => {
  let element = document.documentElement;
  if (fullscreen.value) {
//退出全屏操作
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    fullscreenText.value = '全屏'
  } else {
//全屏操作
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    fullscreenText.value = '取消全屏'
  }
//全屏状态取反
  fullscreen.value = !fullscreen.value;
}

 出现的问题2:通过按钮点击进入的全屏,不能通过键盘F11退出,相反,通过键盘F11进入的全屏,也不能通过按钮点击退出,

解决方法:通过监听keydown事件,取消F11按钮默认事件,用js按钮点击方法代替,代码如下:

//解决按F11实现的全屏,用api不能退出问题,
//之前窗口对象window不能监听到keydowm事件,最好用文档对象document代替
document.addEventListener('keydown', e => {
  e = e || window.event
  if (e.keyCode === 122) {
    //取消f11按钮,用screen方法替代
    e.preventDefault()
    screen()
  }
})

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值