Vue项目——点击全屏

由于项目中用到了点击全屏功能，在此记录一下，希望对大家有有所帮助~

首先在data中定义fullscreen全局变量，用来控制我们页面的全屏状态：

 data() {
     return {
     	fullscreen:false; // 默认不全屏
     }
  }

在methods里面新建 screen 函数：

  // 点击全屏
  	screen() {
        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;
       },

在template模版中的Dom模块绑定点击事件：

  <div @click="screen"></div>

效果图

默认状态

全屏状态：