使用方法 npm install screenfull --save

首先安装 npm install screenfull --save在使用.vue文件中 引入    import screenfull from 'screenfull' 在按钮方法中调用 screenfull.toggle()  可以双向切换全屏与非全屏 还可以检测全屏状态 screenfull.isFullscreen 测试浏览器是否支持全screenfull screenfull.isEnabled 

API 

• .request(ele) 全屏

•  .exit() 退出全屏 

• .toggle() 切换全屏

• .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件 

• .off(event, function) ： 移除前面已经注册的事件 

• .element： 返回一个全屏的dom节点，如果没有就为 null 

• .isFullscreen : 是否是全屏状态 

• .isEnabled ： 判断是否支持全屏

使用原生全屏方法

   <img class="full-sc" src="./image/fullscreen.png" alt="全屏" @click="toogle">

const fullscreenFlag = ref(false)
const toogle = () => { 
 if (!fullscreenFlag.value) {   
 //如果未全屏，则开启全屏  
  fullscreenFlag.value = true    
//获取需要全屏的元素    
let full = document.getElementById('fullDom')    
//开启全屏方法    toFullscreen(full)    
//分辨率调整后，重新初始化方法   
 init(); 
 } else { 
   //如果已全屏，则退出全屏  
  fullscreenFlag.value = false   
 //退出全屏方法   
 cancelFullscreen()   
 //分辨率调整后，重新初始化方法  
  init(); 
 }
}
//退出全屏
const cancelFullscreen = () => {  
if (document.exitFullscreen) {   
 document.exitFullscreen() 
 } else if (document.mozCancelFullScreen) { 
   document.mozCancelFullScreen() 
 } else if (document.webkitCancelFullScreen) { 
   document.webkitCancelFullScreen() 
 } else if (document.msExitFullscreen) { 
   document.msExitFullscreen()
  }
}
//全屏方法
const toFullscreen = (element) => { 
 //全屏 
 if (element.requestFullscreen) {  
  element.requestFullscreen() 
 }  
//兼容Firefox全屏
  else if (element.mozRequestFullScreen) {  
  element.mozRequestFullScreen() 
 }  
//兼容Chrome Safari Opera全屏  
else if (element.webkitRequestFullscreen) {  
  element.webkitRequestFullscreen() 
 } 
 //兼容IE Edge全屏 
 else if (element.msRequestFullscreen) {  
  element.msRequestFullscreen() 
 }
}