Vue全屏插件

需求

点击某按钮实现页面全屏 按下 Esc 键退出全屏 IE9以下无需兼容

安装

npm install --sava screenfull

使用

<script>
// 导入全屏第三方模块
import screenfull from 'screenfull'
export default {
  data () {
      return {
        // 全屏/不全屏
        isFullscreen: false
      }
   }，
  methods: {
    // 全屏模式 将方法绑定(点击事件)到页面的元素上即可
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: '您的浏览器无法进入全屏模式',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = true
    },
    // Esc 全屏监测
    checkFull() {
      let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      if (isFull === undefined) {
          isFull = false
      }
      return isFull
    }
  },
  mounted() {
      window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
              // 退出全屏
              this.isFullscreen = false
            }
          }
       }
    }
</script>