Vue全屏功能

最新推荐文章于 2025-03-22 08:47:04 发布

晓太白

最新推荐文章于 2025-03-22 08:47:04 发布

阅读量9.4k

点赞数 5

分类专栏： vue 文章标签：全屏事件 vue

原文链接：https://blog.youkuaiyun.com/weixin_48171107/article/details/111354532

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

1、安装全屏插件
项目中使用的是sreenfull插件，执行命令安装

npm install --save screenfull

2、页面中添加按钮

<div class="btn-fullscreen" @click="handleFullScreen">
  <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
    <i class="el-icon-rank"></i>
  </el-tooltip>
</div>

3、定义初始值

  data() {
    return {
      fullscreen: false
    }
  },

4、添加事件

handleFullScreen(){
  let element = document.documentElement;
  if (this.fullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } 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();
    }
  }
  this.fullscreen = !this.fullscreen;
},