全屏功能-实现全屏-图标切换

最新推荐文章于 2024-09-02 14:07:15 发布

留着鼻涕敲代码

最新推荐文章于 2024-09-02 14:07:15 发布

阅读量601

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_58515303/article/details/121037033

版权

目标：添加一个按钮，实现全屏网页全屏切换
实现方法：浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。
接下来我主要用到使用screenFull插件来提供全屏功能

1.安装组件

npm i screenfull

1.1介绍几个screenfull核心方法和属性

screenfull.toggle()

这个方法会请求全屏，如果当前是全屏则会退出全屏。

.on（事件，函数）

screenfull是插件，它自带事件监听 on

screenfull.isFullscreen

返回一个布尔值，当前是否是全屏状态。

2.使用组件

在全屏组件中导入

import screenfull from 'screenfull'

3.给点击的图标添加一个事件

<svg-icon
     :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />

在事件函数中使用screenfull.toggle() 方法实现全屏
使用on绑定一个change事件在全屏非全屏之间切换触发
并通过screenfull.isFullscreen获取到当前是否是全屏状态（是true 反之false）

  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    toggleScreen() {
      screenfull.toggle() // 切换全屏页面
      screenfull.on('change', () => {
        this.isFullscreen = screenfull.isFullscreen
      })
    }
  }