Vue中，点击全屏按钮，进入全屏

爱吃的前端程序员

于 2020-09-08 16:41:43 发布

阅读量2.3k

点赞数

分类专栏： vue js 文章标签： js

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

版权

vue 同时被 2 个专栏收录

21 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍如何使用Vue.js实现网页的全屏与取消全屏功能。通过监听document对象的不同方法，如requestFullscreen, exitFullscreen等，配合Vue的data属性和methods，实现页面元素的全屏切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<button>全屏/取消全屏</button>

data() {
  return {
    fullscreen: false
  }
},
methods: {
  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;
  }
}