vue screenfull浏览器全屏预览 （使用记录）

在前端页面开发中，为了增加交互性，经常会使用一些特效功能，比如：vue-particles 实现动态粒子背景效果 ，或者 screenfull 实现全屏预览。
今天特意记录一下 screenfulle 的使用：

1，安装依赖

cnpm install screenfull@4.2.0 --save

• 一定要指定版本，这里特别推荐使用4.2.0 ，其他版本个人感觉对浏览器的支持不太友好，可能导致效果出不来。

2，引入依赖

在页面中引入依赖

import screenfull from 'screenfull'

3，添加方法

 methods: {
    click () {
      if (!screenfull.enabled) {
        this.$message({
          message: '抱歉，您的浏览器不支持使用全屏',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    /**
         * 是否全屏并按ESC键的方法
         */
    checkFull () {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    }
  }

好了，这样就OK了，打开你的页面，点击看看效果吧。。。。。