Vue 全屏操作，js和screenfull.js

话不多说啥，上代码

screenfull.js插件使用

import screenfull from 'screenfull'

// 用来监听全屏和取消全屏操作，控制icon切换

screenfull.on('change', this.screenfullChange)

// 切换全屏方法

screenfull.toggle()

纯js使用

注意：js操作全屏，全屏状态下，因为全屏和弹窗优先级问题，会导致一些弹窗类无法打开

// 监听全屏和取消全屏事件

    window.addEventListener('resize', () => {

      if (document.fullscreenElement) {

        this.fullscreenFlag = true

      } else {

        this.fullscreenFlag = false

      }

    })

// 触发方法，判断当前是否是全屏状态

      if (!this.fullscreenFlag) {

        // 获取需要全屏的容器

        const full = document.querySelector('#fullscreenBox')

        if (full.RequestFullScreen) {

          full.RequestFullScreen()

          // 兼容Firefox

        } else if (full.mozRequestFullScreen) {

          full.mozRequestFullScreen()

          // 兼容Chrome, Safari and Opera等

        } else if (full.webkitRequestFullScreen) {

          full.webkitRequestFullScreen()

          // 兼容IE/Edge

        } else if (full.msRequestFullscreen) {

          full.msRequestFullscreen()

        }

      } else {

        if (document.exitFullScreen) {

          document.exitFullScreen()

          // 兼容Firefox

        } else if (document.mozCancelFullScreen) {

          document.mozCancelFullScreen()

          // 兼容Chrome, Safari and Opera等

        } else if (document.webkitExitFullscreen) {

          document.webkitExitFullscreen()

          // 兼容IE/Edge

        } else if(document.msExitFullscreen) {

            document.msExitFullscreen();

         }