vue實現全屏效果

方式一：js實現全屏

<template>
 <div>
   <a-button type="primary" @click="screen">全屏</a-button>
 </div>
</template>

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

methods:{
    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;
  },
}

方式二：使用的是sreenfull插件，執行命令安裝

下載
npm install --save screenfull
在頁面引入
import screenfull from ‘screenfull'


<template>
   <div>
     <a-button type="primary" @click="screen">全屏</a-button>
   <div>
</template>

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

methods:{
    screen() {
   screenfull.toggle();
  
  },

}