vue项目中通过使用screenful插件实现全屏

1. 安装screenfull.js插件

npm install screenfull --save

2. 在需要使用的地方，引入screenfull

import screenfull from 'screenfull'

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  data() {
    return {
      isFullscreen: false,
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    toggle() {
      if (!screenfull.isEnabled) {
        this.$message.warning('你的浏览器不支持全屏')
        return false
      }
      screenfull.toggle()
    },
    change() {
      console.log(screenfull.isFullscreen)
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.isEnabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.isEnabled) {
        screenfull.off('change', this.change)
      }
    },
  },
}
</script>