vue使用screenfull实现全屏

1. screenfull介绍

官网地址：https://github.com/sindresorhus/screenfull.js

2. 依赖安装

   npm install --save screenfull

这里我在安装后有报错，默认给我安装的是6.0版本，后来我重新安装5.1.0版本报错消失

3. 引入

  import screenfull from "screenfull"

4. 案例展示

<template>
    <div>
      <div v-show="!isFullscreen" class="in-img" @click="fullScreen"></div>
      <div v-show="isFullscreen" class="out-img" @click="fullScreen"></div>
    </div>
</template>

<script>
//引入
import screenfull from 'screenfull'
export default {
  name: "",
  components: {
  },
  props: {},
  data () {
    return { 
    isFullscreen: false //	定义一个判断当前是否为全屏的变量
     };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.fullChange)
      }
    },
    //切换
    fullScreen () {
      if (!screenfull.isEnabled) {
        return false
      }
      //全屏
      screenfull.toggle();
    },
    fullChange () {
      this.isFullscreen = screenfull.isFullscreen
    }
  },
  destroy () {
    if (screenfull.isEnabled) {
      screenfull.off('change', this.fullChange)
    }
  }
};
</script>

<style lang="less" scoped>
</style>

用作本人工作中所遇的记录。