vue页面局部全屏(某个dom元素)（包括退出全屏、监听）

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

1、话不多说直接上源码

一、左上角的图标是随着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)
  }
}

}
}

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

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

版权声明：本文为CSDN博主「weixin_47563457」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_47563457/article/details/112450153