vue全屏插件screenfull的使用

最近在做vue大屏项目，大屏全屏按钮可使用vue插件screenfull实现。

1、项目目录下安装screenfull

npm install screenfull --save-dev

2、项目组件中引入

import screenfull from 'screenfull'

3、使用screenfull 组件

1）div中绑定点击事件

            

    

2）实现事件方法

methods: {

    clickFullscreen(){

      if (!screenfull.isEnabled) {

          this.$message({

            message: '浏览器不支持',

            type: 'warning'

          })

          return false

        }

        screenfull.toggle();

        this.isFullscreen=true

      },

      checkFull() {

      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

      // to fix : false || undefined == undefined

      if (isFull === undefined) {

          isFull = false;

      }

      return isFull;

    }

3）监听当前是否全屏，实现屏幕自适应

mounted() {

      window.onresize = () => {

        // 全屏下监控是否按键了ESC

        if (!this.checkFull()) {

          // 全屏下按键esc后要执行的动作

          this.isFullscreen = false;

        }

      }

    }