实现开启全屏模式和关闭全屏模式

最新推荐文章于 2024-09-02 19:10:49 发布

m0_70896270

最新推荐文章于 2024-09-02 19:10:49 发布

阅读量2k

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_70896270/article/details/125983488

版权

该博客介绍了如何使用浏览器提供的API开启和关闭全屏，并展示了在Vue项目中如何处理全屏状态变化。通过监听'fullscreenchange'事件来更新组件状态。为了处理浏览器兼容性问题，引入了screenfull.js库，简化了全屏操作并自动处理了兼容性。在mounted钩子中注册事件监听器，并在toggleScreen方法中调用screenfull.toggle()实现全屏切换。

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

浏览器底层给我们提供了开启全屏和关闭全屏的API

1 开启全屏: document.documentElement.requestFullscreen()

2 关闭全屏: document.exitFullscreen()

实例

<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isScreenFull? 'exit-fullscreen':'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull',
  data() {
    return {
      isScreenFull: false
    }
  },
  mounted() {
    // // 在钩子函数中注册一个事件 注册给window
    // 这里的代码主要作用是：当我们按ESC时不会改变this.isScreenFull的值,所以我们在生命周期函数中写个事件监听,当开启全屏或者关闭全屏的时候会触发fullscreenchange这个事件
     window.addEventListener('fullscreenchange', () => {
       // 这块得用箭头函数因为不用箭头函数的话this指向当前事件源
        console.log(document.fullscreenElement)
       const flag = document.fullscreenElement
       console.log(flag)
       if (!flag) {
        console.log(123)
         this.isScreenFull = false
       }
     })
  },
  methods: {
    toggleScreen() {
       console.log(res)
       if (this.isScreenFull) {
         document.exitFullscreen()
         // this.isScreenFull = false
       } else {
        document.documentElement.requestFullscreen()
         // this.isScreenFull = true
       }
       this.isScreenFull = !this.isScreenFull // 直接在后边来个取反就好，就不用在if里赋值了
      // 这样写比较麻烦,而且得写很多,因为不同浏览器的兼容不一样，所以我们使用插件
    }
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

这样写可以实现,如果要考虑浏览器兼容问题的话得考虑好多浏览器,得写很多的判断条件，所以可以使用简单的插件来完成,插件帮助我们解决了浏览器兼容问题

下载一个插件叫 screenfull 网址 https://github.com/sindresorhus/screenfull.js#readme

下载的时候有时候需要指定下版本,因为并不是所有版本都适合目前自己做的项目

在使用vue-element-admin 后台管理项目中使用的是5版本 screenfull@5

安装后导入使用

<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isScreenFull? 'exit-fullscreen':'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isScreenFull: false
    }
  },
  mounted() {
    // screenfull在这里有一个on方法，监控事件的触发
    screenfull.on('change', () => {
      // screenfull.isFullscreen全屏返回true,退出全屏显示false,返回一个布尔值
      // console.log(screenfull.isFullscreen)
      // 要实现切换不同的图标
      this.isScreenFull = screenfull.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
      // screenfull.isEnabled 判断当前浏览器是否支持全屏
      if (screenfull.isEnabled) {
        // screenfull.toggle 自动帮助我们完成了进入全屏和退出全屏
        screenfull.toggle()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>