需求

點(diǎn)擊某按鈕實(shí)現(xiàn)頁面全屏 按下 Esc 鍵退出全屏 IE9以下無需兼容

安裝

npm install --sava screenfull

使用

<script>
// 導(dǎo)入全屏第三方模塊
import screenfull from 'screenfull'
export default {
  data () {
      return {
        // 全屏/不全屏
        isFullscreen: false
      }
   }，
  methods: {
    // 全屏模式 將方法綁定(點(diǎn)擊事件)到頁面的元素上即可
    screenfull() {
      if (!screenfull.enabled) {
        this.$message({
          message: '您的瀏覽器無法進(jìn)入全屏模式',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = true
    },
    // Esc 全屏監(jiān)測
    checkFull() {
      let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      if (isFull === undefined) {
          isFull = false
      }
      return isFull
    }
  },
  mounted() {
      window.onresize = () => {
            // 全屏下監(jiān)控是否按鍵了ESC
            if (!this.checkFull()) {
              // 退出全屏
              this.isFullscreen = false
            }
          }
       }
    }
</script>