纯js，三行代码实现全屏模式

不会写代码的小前端

已于 2024-01-12 16:46:42 修改

阅读量677

点赞数 7

文章标签： javascript 前端 vue.js

于 2024-01-12 16:20:10 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44132277/article/details/135555944

版权

本文介绍了如何在Vue3项目中使用HTML和JavaScript/TypeScript实现全屏功能，包括全屏按钮的HTML代码、点击事件处理以及可能遇到的兼容性和动画效果问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概要

要求：在浏览器web中，点击全屏按钮，实现全屏，再次点击又恢复。

技术栈：vue3+ts+js

具体实现

1、HTML代码

//全屏按钮
 <el-button circlesize="small" icon="FullScreen" @click="fullScreen"></el-button>

2、JS/TS代码

// 全屏按钮点击
const fullScreen = () => {
  // DOM对象的一个属性：判断当前是不是全屏模式 全屏:true,不是全屏:false
  let full = document.fullscreenElement;
  //  切换为全屏模式
  if (!full) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};