vue如何监听F11和手动的全屏、退出全屏事件

可以利用插件screenful:
踩坑点1：不要安装最新版本，安装5.0.2即可
npm install [email protected]

	//调用监听事件
  mounted() {
    
    
  	//调用监听事件
    this.screenFull();
  },
  methods:{
    
    
      //监听Esc事件；
    screenFull() {
    
    
      //监听f11事件
      window.addEventListener("keydown", this.KeyDown, true); 
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
      document.addEventListener("fullscreenchange", () => {
    
    
        this.isFullscreen = !this.isFullscreen;//你要切换得图标使用得属性
      });
      document.addEventListener("mozfullscreenchange", () => {
    
    
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("webkitfullscreenchange", () => {
    
    
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("msfullscreenchange", () => {
    
    
        this.isFullscreen = !this.isFullscreen;
      });
    },
    KeyDown(event) {
    
    
      if (event.keyCode === 122) {
    
    
        event.returnValue = false;
        this.isScreenFull(); //触发全屏的方法
      }
    },
    //全屏方法
    isScreenFull() {
    
    
      if (!screenfull.isEnabled) {
    
    
        return false;
      }
      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // 无需自己再判断当前屏幕状态
        screenfull.toggle();
    },

  }

踩坑点2：调试时候因为会打开控制台，所以可能有些问题，因为控制台出现后不是全屏，直接执行代码看结果即可。

注：若要显示按钮上文字状态，可通过监听isFullscreen 字段来显示。