vue 插件 screenFull 实现全屏非全屏切换

推荐以下版本screenfull 减少报错哦

npm install --save-dev screenfull@5.1.0

<template>

  <div class="isFull">

    <el-button :class="isFullscreen ? 'red' : 'blue'" @click="click">是否全屏</el-button>

  </div>

</template>

<script>

import screenfull from 'screenfull'

export default {

  name: 'Screenfull',

  data() {

    return {

      isFullscreen: false

    }

  },

  methods: {

    click() {

      console.log(screenfull,'❀❀');

      if (!screenfull.isEnabled) {

        this.$message({

          message: 'you browser can not work',

          type: 'warning'

        })

        return false

      }

      screenfull.toggle()

    },

    change() {

      this.isFullscreen = screenfull.isFullscreen

    },

    init() {

      console.log(screenfull,'lll','❀❀');

      if (screenfull.isEnabled) {

        screenfull.on('change', this.change)

      }

    },

    destroy() {

      if (screenfull.isEnabled) {

        screenfull.off('change', this.change)

      }

    }

  },

   mounted() {

    this.init()

  },

  beforeDestroy() {

    this.destroy()

  },

}

</script>

<style scoped>

.isFull{

  width: 100%;height: 100%;

  background: #ccc;

}

.red{

  color:red;

}

.blue{

  color:blue;

}

</style>