目录

官网：screenfull 

一、安装

 二、在.vue里使用

三、效果

---

Vue3中我用的是 screenfull 插件

官网：screenfull 

相关API

• .request(ele) 全屏
• .exit() 退出全屏
• .toggle() 切换全屏
• .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件
• .off(event, function) ： 移除前面已经注册的事件
• .element： 返回一个全屏的dom节点，如果没有就为 null
• .isFullscreen ： 是否是全屏状态
• .isEnabled ： 判断是否支持全屏

一、安装

npm install screenfull --save

 二、在.vue里使用

<template>
  <div style="width: 100%;height: 100%;">
    <div style="float: right;height: 100%;position: relative;display: flex;align-items: center;">
      <el-button type="success" @click="screenfullClick">{{ isFullscreen ? '退出全屏' : '全屏展示' }}</el-button>
    </div>
  </div>
</template>
 
<script setup>
  //  按需引入 screenfull
  import screenfull from 'screenfull'
  import { ref, onMounted, onUnmounted } from 'vue'
 
  const isFullscreen = ref(false)
 
  onMounted(() => {
    window.addEventListener('resize', currentScreen)
  })
 
  onUnmounted(() => {
    window.removeEventListener('resize', currentScreen)
  })
 
  // 浏览器改变触发
  const currentScreen = () => {
    if(screenfull.isFullscreen !== isFullscreen.value) isFullscreen.value = screenfull.isFullscreen
  }
  //  点击切换全屏
  const screenfullClick = () => {
    if (screenfull.isEnabled) screenfull.toggle()
  }
</script>
<style scoped>
  .top-right {
    float: right;
    height: 100%;
    position: relative;
  }
</style>

三、效果

点击全屏 效果