vue按键全屏和F11全屏共存

安装

npm install --save screenfull

使用

import screenfull from ‘screenfull’

全屏按钮

我这里用的是一个icon图标

<i :class="fullscreen?'iconfont icon-zuidahua':'iconfont icon-zuidahua1'" @click="clickFullscreen"></i>

js代码如下

data() {
    return {
      fullscreen: false,
    }
  },
  watch: {
    fullscreen(newvalue, oldvalue) {
      if (newvalue != oldvalue) {
        //进行退出全屏的后的事件
        console.log('退出全屏')
      }
    }
  },
  mounted() {
    let that = this;
    window.addEventListener("keydown", this.KeyDown, true);
    window.onresize = () => {
      //调用判断全屏的方法，用来监听
      that.checkFull()
    }
  },
  methods: {
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.clickFullscreen()   //触发全屏的按钮
      }
    },

    clickFullscreen() {
      screenfull.toggle();	// 全屏状态切换
      this.fullscreen = !this.fullscreen;
    },
    checkFull() {
      let fullscreen = window.fullScreen || document.webkitIsFullScreen
      this.fullscreen = fullscreen
      return fullscreen;
    },
  },

原文连接：https://www.cnblogs.com/qmy-bx/p/14767804.html