当前位置: 首页 > news >正文

可视化大屏实现全屏或非全屏

通过点击按钮实现全屏和非全屏效果展示

代码如下:

<template>
//点击icon图片进入全屏或非全屏<img :src="screenStatus ? '/src/assets/noFull.png' : '/src/assets/full.png'" alt="" @click="enterFullScreen"  />
</template><script setup lang="ts">
import { ref } from "vue";
// 默认小屏
const screenStatus = ref(false);
const enterFullScreen = () => {let element = document.documentElement;screenStatus.value = document.fullscreenElement === null ? false : true;if (screenStatus.value) {if (document.exitFullscreen) {document.exitFullscreen();}} else {if (element.requestFullscreen) {element.requestFullscreen();}}screenStatus.value = !screenStatus.value;
};
</script>

A winner is a dreamer who never gives up.

http://www.dtcms.com/a/208029.html

相关文章:

  • 继电保护与安全自动装置:电力系统安全的守护神
  • Windows 安装 FFmpeg 新手教程(附环境变量配置)
  • ProfiNet转Ethernet/IP网关选型策略适配西门子S7-1500与三菱变频器的关键参数对比
  • Oracle Apps R12——报表入门2:单表——报表开发流程
  • .NET外挂系列:6. harmony中一些实用的反射工具包
  • 大模型高效微调方法综述:P-Tuning软提示与lora低秩微调附案例代码详解
  • word设置如“第xx页 共xx页”格式的页码
  • 本地分支git push 报错 fatal: The current branch XXXX has no upstream branch.
  • 百千鳥VF可变字体 momochidori variable font
  • Lyra学习笔记1地图角色加载流程
  • 塔能高温冰蓄冷技术:工厂能耗精准节能的创新之路
  • window 显示驱动开发-视频内存供应和回收(三)
  • 3D个人简历网站 7.联系我
  • LVGL(lv_textarea文本框控件)
  • feign调用指定服务ip端口
  • 【Linux部署Java服务的那些事】
  • C++之STL--string
  • TCP实现双向通信练习题
  • 人工智能在智能教育中的创新应用与未来展望
  • 【C++模板与泛型编程】模板特化
  • 论文Review 地面分割 GroundGrid
  • KEPServerEX MQTT使用
  • 【Linux】基础开发工具(下)
  • Sa-Token登录权限认证
  • Flume之选择器:复制和多路复用(比喻化理解
  • 频湖脉决全文
  • 科技成果鉴定测试怎么进行?进行鉴定测试有什么好处
  • Java对象内存分配优化教学
  • Python图形化秒表:使用Turtle打造精确计时工具
  • redis 缓存穿透,缓存雪崩,缓存击穿