vue全屏某个dom元素（包括退出全屏、监听）

一、左上角的图标是随着DOM 元素是否全屏而改变的
二、用isFullscreen来监听DOM是否全屏
三、 用screenfull.toggle(element)来使元素进入、退出全屏

<template>
  <div id="button" style="background-color: red;width: 200px;height: 200px;">
    <svg-icon
      :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
      style="width:20px;height: 20px;color: #24da70"
      @click="buttoncli"
    />
  </div>

</template>

<script>
import screenfull from 'screenfull'
//	全屏功能使用:1.安装,npm install --save screenfull
//	         2.引入
//	         3.点击时判断浏览器是否可全屏,不可全屏给提示,可全屏执行screenfull.toggle()
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    buttoncli() {
      const element = document.getElementById('button')
      if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }

      screenfull.toggle(element)
    },
    change() {
      this.isFullscreen = screenfull.isFullscreen
    },
    init() {
      if (screenfull.enabled) {
        screenfull.on('change', this.change)
      }
    },
    destroy() {
      if (screenfull.enabled) {
        screenfull.off('change', this.change)
      }
    }
  }
}
</script>

效果如下图
未全屏状态
全屏状态

如果有用请点赞，您的支持是对我最大的鼓励！！！