页面全屏功能

<span> {{ isFullscreen ? '退出全屏' : '全屏显示' }} span>

@/mixins/index.js

import { mapGetters } from 'vuex'
import screenfull from 'screenfull'

export const PortraitMixin = {
  data() {
    return {
      lightEchartsNoDataColor: '#000',
      blueEchartsNoDataColor: '#fff',
      timeFormat: 'yyyy/MM/dd',
      timeValueFormat: 'yyyy-MM-dd'
    }
  },
  computed: {
    ...mapGetters(['isFullscreen'])
  },
  mounted() {
    const _this = this
    window.addEventListener(
      'resize',
      () => {
        // 全屏下监控是否按键了ESC
        if (_this.checkFull()) {
          // 全屏下按键esc后要执行的动作
          screenfull.exit()
          _this.$store.commit('SET_isFullscreen', false)
        }
      },
      false
    )
  },
  methods: {
    // 全屏显示
    handleScreenFull() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      if (this.isFullscreen) {
        screenfull.exit()
        this.$store.commit('SET_isFullscreen', false)
        this.$store.commit('SET_isShowHeader', true)
      } else {
        screenfull.request()
        this.$store.commit('SET_isFullscreen', true)
        this.$store.commit('SET_isShowHeader', false)
      }
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      const isFullscreen =
        window.fullScreen ||
        window.isFullscreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled
      let isFull = document.fullscreenEnabled && !isFullscreen
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    }
  }
}