【VUE】vue实现div全屏效果

1、定义容器

<div id="fullscreen" class="fullscreen" ref="fullscreen">
<!-- 需要全屏区域 -->
</div>

<a-button type="primary" @click="fullScreen()">全屏</a-button>

2、实现方法

 fullScreen() {
      //全屏
      var full = document.getElementById('fullscreen')
      this.launchIntoFullscreen(full)
    },

	//全屏封装
    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    //退出全屏封装
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
    },

	checkFull(){
		//判断浏览器是否处于全屏状态 （需要考虑兼容问题）
		//火狐浏览器
		var isFull = document.mozFullScreen||
		document.fullScreen ||
		//谷歌浏览器及Webkit内核浏览器
		document.webkitIsFullScreen ||
		document.webkitRequestFullScreen ||
		document.mozRequestFullScreen ||
		document.msFullscreenEnabled
		if(isFull === undefined) {
        isFull = false
        }
        return isFull;
	},

关于全屏后弹出层组件无法显示的问题
可以阅读我的下一篇文章
【AntDesign】解决antdesign控件在div全屏下不显示的问题