大屏根据浏览器不同实现网页全屏效果

<div class="quanping" @click="quanping">全屏</div>

//js
<script>
export default {
  components: {},
  data () {
    return {
      a: 0,
    }
  },
  mounted () {
  },
  methods: {
    quanping () {
      this.a++
      this.a % 2 == 1 ? this.enterfullscreen() : this.exitfullscreen()
    },
    //控制全屏
    enterfullscreen () { //进入全屏
      var docElm = document.documentElement
      //W3C
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      }
      //FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      }
      //Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      }
      //IE11
      else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen()
      }
    },
    //退出全屏
    exitfullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
  }
}
</script>