Vue使用screenfull实现全屏效果

本文实例为大家分享了Vue使用screenfull实现全屏的具体代码，供大家参考，具体内容如下

安装

npm install --save screenfull

在需要的页面引用

import screenfull from 'screenfull'

全屏使用

原生实现方法

// 全屏事件 兼容
clickFullscreen() {
 let element = document.documentElement;
 if (this.isFullscreen) {
  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.isFullscreen= !this.isFullscreen;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。