vue+element ui 设置页面全屏 全屏和退出全屏的切换

vue+element ui 设置页面全屏 全屏和退出全屏的切换

方式1

• screenfull 插件

// 属性
screenfull.isFullscreen; // 判断当前页是否全屏 返回类型 布尔值（true/false）
screenfull.isEnabled; // 判断当前浏览器是否支持全屏 返回类型 布尔值（true/false）
 
//方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

• 安装插件
  • 1.yarn add screenfull 或者 npm i screenfull
• 引入插件
  • 2.在页面进行引入 import screenfull from 'screenfull'
• 使用插件
  • 3 参考代码：

<template>
 <div class="hed_rig">
   <!-- 三目运算 展示对应ico -->
   <i :class=" this.iFullScreen? 'el-icon-copy-document headerIco': ' el-icon-full-screen headerIco'"
       title="全屏/退出全屏"
       @click="toggleFullScreen" >
   </i>      
 </div>     
</template>
<script>            
 // 引入全屏插件
import screenfull from 'screenfull'           
export default {
  name: 'test',
  data() {
    return {  
	iFullScreen: false,
  		}
	},
	methods: {
    // 页面全屏事件
    toggleFullScreen() {
      // 判断当前浏览器是否支持全屏
      if (screenfull.isEnabled) {
        //当前页面是否全屏
        if (!screenfull.isFullscreen) {
          this.iFullScreen = !this.iFullScreen
          screenfull.request()
        } else {
          this.iFullScreen = !this.iFullScreen
          screenfull.exit()
        }
      } else {
      //提醒 无法全屏浏览
        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
      }
    },
  },

}       
       
       

方式2

• 通过 js 实现

<template>
  <div>
    <el-button type="primary" @click="screen">全屏</el-button>
  </div>
</template>

<script>
export default {
  name: 'indexAss',

  data() {
    return {
      fullscreen: false,
    }
  },

  methods: {
    screen() {
      let element = document.documentElement

      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11

          element.msRequestFullscreen()
        }
      }

      this.fullscreen = !this.fullscreen
    },
  },
}
</script>