【vue】 页面全屏用法介绍

一、全屏原理

Vue实现全屏效果的原理其实很简单，主要是通过JavaScript DOM API可以操控DOM节点的CSS样式来实现。具体方式是通过增加一些样式代码来实现全屏，然后在取消全屏的时候，再去除这些样式。以下是实现全屏的代码：

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.mozRequestFullscreen) {
    element.mozRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

二、按钮实现全屏

通过为按钮添加click事件，然后在事件中触发全屏函数，即可轻松实现点击按钮全屏的效果，代码如下：

<button @click="handleFullScreen">全屏</button>

<script>
export default {
  methods: {
    handleFullScreen() {
      let element = document.documentElement;
      launchFullscreen(element);
    }
  }
}
</script>

三、ESC键退出全屏

除了通过点击按钮来退出全屏外，还可以通过ESC键触发退出。通过监听document的keydown事件，在按下ESC键的时候，即可触发退出全屏函数，代码如下：

<script>
export default {
  mounted() {
    document.addEventListener("keydown", this.handleEscKey);
  },
  methods: {
    handleFullScreen() {
      let element = document.documentElement;
      launchFullscreen(element);
    },
    handleEscKey(event) {
      if(event.keyCode === 27) {
        exitFullscreen();
      }
    }
  }
}
</script>

四、自动全屏

有些时候我们需要在页面加载时自动进入全屏模式，这时候可以在组件的mounted生命周期中触发全屏函数，代码如下：

<script>
export default {
  mounted() {
    let element = document.documentElement;
    launchFullscreen(element);
  }
}
</script>

五、全屏事件监听

在全屏模式中，有时候需要监听某些事件的触发，比如监听全屏状态的改变，可以使用fullscreenchange事件来实现。代码如下：

<script>
export default {
  mounted() {
    document.addEventListener("fullscreenchange", this.handleFullScreenChange);
  },
  methods: {
    handleFullScreenChange() {
      if(document.fullscreenElement) {
        console.log("进入全屏模式");
      } else {
        console.log("退出全屏模式");
      }
    }
  }
}
</script>

总结

以上就是关于Vue实现全屏效果的详解，可以依据实际需求，选取适当的方法实现全屏效果。