vue3全屏

小白讲前端

于 2024-09-30 15:13:38 发布

阅读量134

点赞数 6

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/m0_50864141/article/details/142657017

版权

直接cv大法

vue3全屏效果

<template>
   <button @click="fullscreen()">{{ fullFlag == false ? "全屏" : "退出全屏" }}
   </button>
</template>

<script  setup >
import { ref } from "vue";
let fullFlag = ref(false);
const fullscreen = () => {
   let element = document.documentElement;
   fullFlag.value = document.fullscreenElement === null ? false : true;
   if (fullFlag.value) {
       if (document.exitFullscreen) {
           document.exitFullscreen();
       }
   }
   else {
       if (element.requestFullscreen) {
           element.requestFullscreen();
       }
   }
   fullFlag.value = !fullFlag.value;
};
</script>

//解释代码逻辑
//let element = document.documentElement;：获取文档的根元素，通常是 <html> 标签。
 
//fullFlag.value = document.fullscreenElement === null? false : true;：检查当前是否处于全屏模式，并更新 fullFlag 的值。
 
//if (fullFlag.value) {...}：如果当前是全屏模式，则尝试退出全屏。
 
//else {...}：如果当前不是全屏模式，则尝试进入全屏。
 
//fullFlag.value =!fullFlag.value;：切换 fullFlag 的值，表示全屏状态的改变。