VUE中网页点击按钮，切换全屏及退出全屏

这是做好的成品效果，样式可根据需求自行修改

 

话不多说直接上代码

        

<template>
    <div class="full">
      <a-button type="primary" @click="screen">点击显示全屏</a-button>
    </div>
</template>

<script>
export default {
  name: 'index',
  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;
    }
  }
}
</script>

<style>
    .full{
      position: absolute;
      width: 130px;
      height: 50px;
      line-height: 50px;
      right: 100px;
      background: rgba(21, 108, 207, 0.8);
      border-radius: 30px;
       text-align: center;
    }
</style>