美文网首页
Vue项目中点击按钮实现全屏模式

Vue项目中点击按钮实现全屏模式

作者: 一只章鱼哥 | 来源:发表于2021-02-02 19:11 被阅读0次

使用原生js实现全屏

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;
  },

原生js实现起来比较复杂,考虑到各种浏览器的兼容性问题

还有另外一种较为方便的方法

npm i --save screenfull

在vue项目中引入插件

import screenfull from "screenfull"

screen() {

  // 如果不允许进入全屏,发出不允许提示

  if (!screenfull.enabled) {

    this.$message("您的浏览器不能全屏");

    return false;

  }

  screenfull.toggle();

  },

相关文章

网友评论

      本文标题:Vue项目中点击按钮实现全屏模式

      本文链接:https://www.haomeiwen.com/subject/hwaytltx.html