点击按钮实现全屏展示

<button @click="openView">打开全屏</button>
// 样式设置为fixed占满浏览器可视部分
<div id="monitor-pick" class="view-part">
    </div>

mounted() {
    window.addEventListener('resize', () => { 
      if (!this.checkFull()) { // 页面结构变化时，判断当前是否处于全屏，否，则隐藏或恢复展示部分
        this.JQ('#monitor-pick').fadeOut()
      }
    })
  },

methods:{
  openView() {
      this.JQ('#monitor-pick').fadeIn() // 需要设置全屏的图片或者页面
      this.viewShow = true
      setTimeout(() => {
        var el = document.documentElement
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen     
        if(typeof rfs != 'undefined' && rfs) {
          rfs.call(el)
        }
      }, 400)
    },
  checkFull(){
        //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
        //火狐浏览器
        var isFull = document.mozFullScreen||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
        if(isFull === undefined) {
          isFull = false
        }
        return isFull
    },
}