十二、vue3+ts项目框架搭建——实现全屏模式

小曲曲

已于 2024-02-28 09:55:35 修改

阅读量436

点赞数 8

分类专栏： vue3.0 框架搭建文章标签：前端 javascript html

于 2024-02-18 09:55:21 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/136146094

版权

vue3.0 同时被 2 个专栏收录

28 篇文章 3 订阅

订阅专栏

框架搭建

15 篇文章 0 订阅

订阅专栏

本文讲述了如何利用DOM的属性和方法在JavaScript中实现全屏功能，同时关注了跨浏览器兼容问题，介绍了requestFullscreen和exitFullscreen方法的使用。

摘要由CSDN通过智能技术生成

使用DOM 的属性和方法实现，会存在不同浏览器兼容问题，可使用插件实现

//全屏按钮点击的回调
const fullScreen = () => {
  //DOM对象的一个属性：可以用来判断当前是不是全屏的模式【全屏：true，不是全屏：false】
  let full = document.fullscreenElement
  //切换成全屏
  if (!full) {
    //文档根节点的方法requestFullscreen实现全屏
    document.documentElement.requestFullscreen()
  } else {
    //退出全屏
    document.exitFullscreen()
  }