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

Vue3.5 企业级管理系统实战(十一):全屏切换组件

本篇主要探讨如何在导航栏(Navbar)中添加全屏切换按钮,并借助功能强大的 screenfull 插件,丝滑实现全屏切换功能,为用户打造更为便捷、流畅的交互体验。

1 安装插件 screenfull

screenfull 是一个轻量级的 JavaScript 库,用于简化在网页中实现全屏功能的操作。它屏蔽了不同浏览器在全屏 API 上的差异,提供统一且易用的接口,增强了跨浏览器兼容性。

 

使用时,首先通过 npm 或 yarn 安装该插件。其核心方法包括:request 用于请求指定元素进入全屏;exit 用于退出全屏;toggle 用于切换全屏状态。

例如,若要让 id 为 myDiv 的元素进入全屏,只需检查 screenfull.isEnabled 为 true 后,调用 screenfull.request(document.getElementById('myDiv')) 即可。此外,还能监听 change 事件,根据全屏状态变化执行相应逻辑。

通过 pnpm 安装 screenfull 插件,代码如下:

pnpm install screenfull

2 Screenfull 组件开发

在 src/components 下新建 Screenfull 文件夹,新建 index.vue 文件,代码如下:

//src/components/Screenfull/index.vue
<template><!-- 定义一个 SVG 图标组件,用于切换全屏状态 --><svg-icon@click="handleClick"custom-class="w-2em h-2em":icon-name="isFullScreen? 'ant-design:fullscreen-exit-outlined': 'ant-design:fullscreen-outlined'"></svg-icon>
</template><script lang="ts" setup>
// 引入 screenfull 库,用于处理全屏相关操作
import screenfull from "screenfull";
// 引入 Vue 的 ref 函数,用于创建响应式数据
import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from "vue";// 创建一个响应式变量 isFullScreen,用于记录当前是否处于全屏状态,初始值为 false
const isFullScreen = ref(false);
// 获取当前组件实例
const { proxy } = getCurrentInstance()!;// 定义点击事件处理函数,用于处理图标点击时的操作
function handleClick() {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持,切换全屏状态screenfull.toggle();} else {// 如果不支持,通过消息提示告知用户浏览器不支持全屏proxy!.$message("浏览器不支持全屏");}
}// 定义更新全屏状态的函数,用于监听全屏状态变化并更新 isFullScreen 的值
function updateFullscreenStatus() {// 获取当前是否处于全屏状态,并更新 isFullScreen 的值isFullScreen.value = screenfull.isFullscreen;
}// 组件挂载完成后执行的生命周期钩子函数
onMounted(() => {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持,监听全屏状态变化事件,并在状态变化时调用 updateFullscreenStatus 函数screenfull.on("change", updateFullscreenStatus);}
});// 组件即将卸载前执行的生命周期钩子函数
onBeforeUnmount(() => {// 检查浏览器是否支持全屏功能if (screenfull.isEnabled) {// 如果支持,移除对全屏状态变化事件的监听screenfull.off("change", updateFullscreenStatus);}
});
</script>

这段代码实现了一个切换全屏状态的功能,通过点击 SVG 图标来切换全屏和退出全屏,同时会根据当前的全屏状态显示不同的图标。并且在组件挂载和卸载时,分别添加和移除对全屏状态变化的监听。  

3 页面引用

在 src/layout/components/Navbar.vue 中引入 Screenfull 组件,代码如下:

//src/layout/components/Navbar.vue
<template><div class="navbar" flex><hamburger@toggleCollapse="toggleSidebar":collapse="sidebar.opened"></hamburger><BreadCrumb></BreadCrumb><div flex justify-end flex-1 items-center mr-20px><screenfull mx-5px></screenfull></div></div>
</template><style scoped lang="scss">
.navbar {@apply h-[var(--navbar-height)];
}
</style><script lang="ts" setup>
import { useAppStore } from "@/stores/app";
// 在解构的时候要考虑值是不是对象,如果非对象解构出来就 丧失响应式了
const { toggleSidebar, sidebar } = useAppStore();
</script>

npm run dev 启动后,页面效果如下:

以上,全屏切换组件就完成了。

下一篇将继续探讨组件尺寸多语言实现,敬请期待~

相关文章:

Vue3.5 企业级管理系统实战(十一):全屏切换组件

本篇主要探讨如何在导航栏&#xff08;Navbar&#xff09;中添加全屏切换按钮&#xff0c;并借助功能强大的 screenfull 插件&#xff0c;丝滑实现全屏切换功能&#xff0c;为用户打造更为便捷、流畅的交互体验。 1 安装插件 screenfull screenfull 是一个轻量级的 JavaScript…...

HAL_UARTEx_ReceiveToIdle_DMA 开启,但是无法进入空闲中断;

HAL_UART_Receive_IT HAL_UARTEx_ReceiveToIdle_DMA 解决措施&#xff0c;关闭HAL_UART_Receive_IT函数&#xff1b; 因为这个函数会开启start_receive 函数中断&#xff0c;这个函数 将标志位一直置busy&#xff0c;导致一直没有进入空闲中断设置&#xff1b;...

第30周Java分布式入门 分布式基础

分布式基础课程笔记 一、什么是分布式&#xff1f; 1. 权威定义 分布式系统定义为&#xff1a;“利用物理架构形成多个自治的处理元素&#xff0c;不共享主内存&#xff0c;通过发送消息合作”。 2. 核心解释 物理架构与处理元素 &#x1f31f; 多台独立服务器/电脑&#x…...

【商城实战(82)】区块链赋能用户身份验证:从理论到源码实践

【商城实战】专栏重磅来袭&#xff01;这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建&#xff0c;运用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用户、商品、订单等核心模块开发&#xff0c;再到性能优化、安全加固、多端适配&#xf…...

一周掌握Flutter开发--9. 与原生交互(上)

文章目录 9. 与原生交互核心场景9.1 调用平台功能&#xff1a;MethodChannel9.1.1 Flutter 端实现9.1.2 Android 端实现9.1.3 iOS 端实现9.1.4 使用场景 9.2 使用社区插件9.2.1 常用插件9.2.2 插件的优势 总结 9. 与原生交互 Flutter 提供了强大的跨平台开发能力&#xff0c;但…...

DeepSeek-V3-0324对比OpenAI GPT-4o和Gemini 2.5 Pro

以下是DeepSeek-V3-0324、OpenAI GPT-4o与谷歌Gemini 2.5 Pro模型的更新点及优化对比总结&#xff1a; 1. DeepSeek-V3-0324 开源地址&#xff1a;https://huggingface.co/deepseek-ai/DeepSeek-V3-0324 核心更新与优化 性能提升&#xff1a; 采用6850亿参数MoE架构&#xff…...

【AI论文】LEGO拼图:大型语言模型在多步骤空间推理方面的表现如何?

摘要&#xff1a;多步骤空间推理涉及跨多个顺序步骤理解和推理空间关系&#xff0c;这对于解决复杂的现实世界应用至关重要&#xff0c;如机器人操作、自主导航和自动化装配。为了评估当前多模态大型语言模型&#xff08;MLLMs&#xff09;在获取这一基本能力方面的表现&#x…...

【深度学习】【目标检测】【OnnxRuntime】【C++】YOLOV5模型部署

【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV5模型部署 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV5模型部署前言Windows平台搭建依赖环境模型转换--pytorch转onnxONNXRuntime推…...

vcpkg安装指定版本的库

一.vcpkg安装 使用git将vcpkg源码克隆到本地制定目录&#xff08;D:\vcpkg&#xff09;&#xff0c;并初始化 git clone https://github.com/microsoft/vcpkg.git cd vcpkg ./bootstrap-vcpkg.sh # Linux/macOS .\bootstrap-vcpkg.bat # Windows 如下图&#xff1a; 二.安…...

springboot 四层架构之间的关系整理笔记五

问题&#xff1a;service 和 多个serviceimpl 分层之间的逻辑关系&#xff1f; 好的&#xff01;用班级活动的例子继续讲&#xff0c;假设班长&#xff08;Service接口&#xff09;要管理多种任务&#xff0c;而不同的班委&#xff08;ServiceImpl实现类&#xff09;负责不同场…...

记录一次交易耗时有毛刺TDSQL数据库排查过程

信息同步非常重要&#xff0c;解决问题前&#xff0c;务必从应用获取实例信息、sql关键字、问题时间段、问题描述。 处理步骤&#xff1a; 1、登陆赤兔&#xff0c;打开实例监控信息&#xff0c;检查CPU、内存、IO、缓冲命中率、proxy汇总请求量耗时情况&#xff0c;初步判断…...

爱普生晶体单元FC2012AN在5G RedCap中的应用

在 5G 技术向物联网领域深度渗透的今天&#xff0c;RedCap&#xff08;5G 轻量化&#xff09;作为衔接中高速物联网场景的关键技术&#xff0c;正加速推动工业、医疗、可穿戴等领域的智能化升级。爱普生 FC2012AN 低 ESR 晶体单元凭借其突破性的小尺寸、低功耗与高稳定性设计&a…...

Linux: 网络,arp的数量为什么会对交换机/路由器有性能的影响

这个问题也是非常普遍的问题。比如最近比较火的一个OVS相关的问题: ARP request packets put high pressure on the pinctrl thread in ovn-controller 另一个在工作种也遇到了相似的问题,当一个网络里发了同时发了小一百个GARP之后,路由器的gateway就会有ARP处理延迟。 A…...

javaWeb vue的简单语法

一、简介 两大核心优势&#xff1a; 声明式渲染&#xff1a;Vue 基于标准 HTML 拓展了一套模板语法&#xff0c;使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 响应性&#xff1a;Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 D…...

Android 中隐藏标题栏和状态栏的方法

在Android开发中&#xff0c;隐藏标题栏和状态栏是实现全屏显示的常见需求。 一、隐藏标题栏 1、通过代码隐藏 对于继承自 AppCompatActivity 的 Activty&#xff0c;可在 onCreate() 方法中调用supportRequestWindowFeature 或 getSupportActionBar 方法来隐藏标题栏。 ove…...

Tof 深度相机原理

深度相机(TOF)的工作原理_tof相机原理-CSDN博客 深度剖析 ToF 技术&#xff1a;原理、优劣、数据纠错与工业应用全解析_tof技术-CSDN博客 飞行时间技术TOF_tof计算公式-CSDN博客 深度相机&#xff08;二&#xff09;——飞行时间&#xff08;TOF&#xff09;_飞行时间技术-C…...

boost.asio

as&#xff08;async&#xff09;:异步 同步io&#xff1a; reactor (非阻塞)&#xff08;需要注册一次&#xff0c;在等待消息时可以干别的事&#xff09; 阻塞io网络模型 接口&#xff1a;read\accept\connect\write 接口返回时&#xff0c;io完成 异步…...

Python 装饰器(Decorators)

什么是装饰器&#xff1f; 装饰器&#xff08;Decorator&#xff09;本质上是一个 修改其他函数功能的函数。它的核心思想是&#xff1a;不修改原函数代码&#xff0c;动态添加新功能。比如&#xff1a; 记录函数执行时间 检查用户权限 缓存计算结果 自动重试失败操作 理解…...

django orm的优缺点

Django ORM&#xff08;对象关系映射&#xff09;是 Django 框架的核心组件之一&#xff0c;它通过将数据库表映射为 Python 类&#xff0c;简化了数据库操作。以下是其优缺点总结&#xff1a; 优点 开发效率高 用 Python 类定义数据模型&#xff0c;无需手写 SQL&#xff0c…...

国产RISC-V车规芯片当前现状分析——从市场与技术角度出发

摘要 随着汽车产业的智能化、电动化转型加速&#xff0c;车规级芯片的战略地位日益凸显。RISC-V指令集凭借其开源、灵活、低功耗等优势&#xff0c;成为国产车规芯片的重要发展方向。本文从市场与技术两个维度出发&#xff0c;深入分析国产RISC-V车规芯片的现状。通过梳理国内…...

不落因果与不昧因果

在佛教浩瀚的哲学体系中&#xff0c;“因果”是贯穿修行始终的核心命题。而“不落因果”与“不昧因果”这对看似矛盾的概念&#xff0c;恰似明镜的两面&#xff0c;映照出修行者对因果法则的不同认知层次。二者虽仅一字之差&#xff0c;却如天堑般分隔了迷悟两岸&#xff0c;其…...

《论语别裁》第02章 为政(08) 诗的伟大

孔子说我整理诗三百篇的宗旨在什么地方&#xff1f;“一言以蔽之”——一句话&#xff0c;“思无邪”。人不能没有思想&#xff0c;只要是思想不走歪曲的路&#xff0c;引导走上正路就好&#xff0c;譬如男女之爱。如果作学问的人&#xff0c;男女之爱都不能要&#xff0c;世界…...

在学校图书馆知识库中进行论文检索报告生成

首先登录信息门户—>科研服务—>机构知识库 在成果认领页面&#xff0c;查看自己的成果情况。如果发现自己的有些成果未被录入&#xff0c;可以发邮件给管理员。 最后&#xff0c;进入成果管理&#xff0c;选择需要的成果进行检索报告的生成...

《寒门枭雄传》章回体拟目与故事设计

《寒门枭雄传》章回体拟目与故事设计 主题&#xff1a;寒门逆袭的制度性困境与个人成长的撕裂性代价 第一回 贩履郎寒冬逢逼债 落魄汉雪夜定从戎 地点&#xff1a;京口草鞋摊→北府军营 人物&#xff1a;刘裕、刁逵&#xff08;士族豪强&#xff09;、刘母 故事&#xff1a; …...

头歌 | Linux之用户高级管理

若未实现预期结果, 可私信我帮你解答 2025-3-28 第1关&#xff1a;创建/删除用户组 > /data/workspace/myshixun/case1/evaluating.sh # 写入新内容 echo "echo 创建newGroup用户组成功 创建newGroupID用户组成功 设置newGroupID用户组ID成功 删除oldGroup用户组成功…...

常用的测试用例

登录、添加、删除、查询模块是我们经常遇到的&#xff0c;这些模块的测试点该如何考虑 1)登录 ① 用户名和密码都符合要求(格式上的要求) ② 用户名和密码都不符合要求(格式上的要求) ③ 用户名符合要求&#xff0c;密码不符合要求(格式上的要求) ④ 密码符合要求&#xf…...

数据结构与算法——顺序表的实现以及增、插、删、查、印、毁

文章目录 一、前言二、顺序表的概念与结构2.1顺序表的概念2.2顺序表的结构 三、顺序表的分类3.1静态顺序表3.1.1静态顺序表的弊端 3.2动态顺序表3.2.1动态顺序表的相对利弊3.2.2动态顺序表的增容方式 四、顺序表的增、插、删、查、印、毁4.1 顺序表的增容4.2顺序表的尾插和头插…...

环境 tensorflow ERROR: No matching distribution found for ai-edge-litert

提示&#xff1a;环境搭建 文章目录 前言多依赖安装 前言 提示&#xff1a;版本 之前文章 condajupyter 环境搭建 PyTorch 2.6 cpu 环境搭建 系统 &#xff1a;ubuntu 22.0 python &#xff1a;3.8 ERROR: No matching distribution found for ai-edge-litert PyTorch: sta…...

基于深度强化学习的智能机器人路径规划技术研究

在人工智能与机器人技术飞速发展的今天&#xff0c;智能机器人在工业、服务、物流等领域的应用日益广泛。路径规划作为智能机器人运动的核心技术之一&#xff0c;直接影响机器人的工作效率和安全性。近年来&#xff0c;深度强化学习&#xff08;Deep Reinforcement Learning, D…...

【ManiSkill】环境success条件和reward函数学习笔记

1. “PickCube-v1” info["success"]&#xff1a;用于指示任务是否成功完成 布尔型张量&#xff0c;在环境的evaluate()方法中计算并返回&#xff1a; "success": is_obj_placed & is_robot_static这确保了机器人不仅能将物体准确放置在目标位置&am…...

畅捷通T+与吉客云数据集成案例解析

畅捷通T与吉客云的高效数据集成案例分享 在企业信息化系统中&#xff0c;数据的高效流转和准确对接是确保业务顺畅运行的关键。本文将聚焦于一个具体的系统对接集成案例&#xff1a;如何将畅捷通T中的采购入库单&#xff08;红字&#xff09;数据无缝集成到吉客云中&#xff0…...

Vue 项目中使用$refs来访问组件实例或 DOM 元素,有哪些注意事项?

大白话Vue 项目中使用$refs来访问组件实例或 DOM 元素&#xff0c;有哪些注意事项&#xff1f; 在 Vue 项目里&#xff0c;$refs 是个超实用的工具&#xff0c;它能让你直接访问组件实例或者 DOM 元素。不过使用的时候&#xff0c;有一些地方可得注意&#xff0c;下面咱就详细…...

Docker Compose 基础知识

一. Docker Compose 引言 Docker Compose 是 Docker 官方提供的一个用于定义和运行多容器 Docker 应用程序的工具。它通过一个yaml格式的配置文件&#xff08;通常命名为 docker-compose.yml &#xff09;&#xff0c;文件中定义多个服务、网络和卷&#xff0c;从而简化复杂应…...

科技赋能|ZGIS综合管网智能管理平台守护地下城市生命线

地下管网作为城市公共安全的重要组成部分&#xff0c;担负着城市的信息传递、能源输送、排涝减灾等重要任务&#xff0c;是维系城市正常运行、满足群众生产生活需要的重要基础设施&#xff0c;是城市各功能区有机连接和运转的维系&#xff0c;因此&#xff0c;也被称为城市“生…...

EXCEL报错:无法共享此工作薄,因表包含excel表或xml映射的解决方法

在分享工作薄是&#xff0c;如果出现了“无法共享此工作薄&#xff0c;因表包含excel表或xml映射”的报错&#xff0c;那么有两个原因&#xff1a; 1.包含Excel表格&#xff0c;这个也是相对比较常见的原因。 首先选中表格。如果你不知道表的位置在哪&#xff0c;那么在Excel左…...

Go 语言标准库中path模块详细功能介绍与示例

Go语言的 path 模块提供了处理斜杠分隔路径的通用方法&#xff0c;适用于跨平台路径操作&#xff08;如 URL 路径或 Unix 风格路径&#xff09;。以下是 path 模块的核心方法及示例说明&#xff1a; 1. path.Base 返回路径的最后一个元素&#xff08;类似 Unix 的 basename 命…...

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 TypeScript Vite 项目中安装和使用 SCSS 1、安装 SCSS 的相关依赖 npm install sass --save-dev2、配置 Vite 对于 Vue 3&#xff0c;Vite 已经内置了对 SCSS 的支持&#xff0c;通常不需要额外的配置。但是&#xff0c;如果需要自定义配置&#xff0c;可以在路径…...

洛谷题单1-B2005 字符三角形-python-流程图重构

题目描述 给定一个字符&#xff0c;用它构造一个底边长 5 5 5 个字符&#xff0c;高 3 3 3 个字符的等腰字符三角形。 输入格式 输入只有一行&#xff0c;包含一个字符。 输出格式 该字符构成的等腰三角形&#xff0c;底边长 5 5 5 个字符&#xff0c;高 3 3 3 个字符…...

实现金蝶与钉钉无缝对接以高效管理银行账号信息

【资料】金蝶&钉钉—银行账号 在企业信息化管理中&#xff0c;数据的高效集成和实时同步至关重要。本文将分享一个实际的系统对接集成案例&#xff1a;如何将金蝶云星空的数据集成到钉钉平台&#xff0c;实现银行账号信息的无缝对接。 本次集成方案【资料】金蝶&钉钉…...

正则表达式-万能表达式

1、正则 正则表达式是一组由字母和符号组成的特殊文本, 它可以用来从文本中找 出满足你想要的格式的句子. {“basketId”: 0, “count”: 1, “prodId”: #prodId#, “shopId”: 1, “skuId”: #skuId#} #prodId# re相关的文章&#xff1a; https://www.cnblogs.com/Simple-S…...

ComfyUi教程之阿里的万象2.1视频模型

ComfyUi教程之阿里的万象2.1视频模型 官网Wan 2.1 特点 一、本地安装1.1克隆仓库1.2 安装依赖&#xff08;1.3&#xff09;下载模型&#xff08;1.4&#xff09;CUDA和CUDNN 二、 使用体验&#xff08;2.1&#xff09;官方例子&#xff08;2.2&#xff09;执行过程&#xff08;…...

如何在一个图片上添加另外一个图片

如果你使用的windows10 系统&#xff0c;可以使用系统自带的画图工具 1. 打开windows搜索&#xff0c; 画图工具 2. 在画图软件内&#xff0c; ctrlc 复制图片 &#xff0c; ctrlv粘贴图片 3. 调整想要粘贴的图片&#xff0c;到上图汇总&#xff0c;最后保存&#xff0c;或者…...

【面试题】在 CSS 中,实现一个 div 中的子 div 水平垂直居中

1. 使用 Flexbox 特点&#xff1a;简单、直观&#xff0c;现代浏览器支持良好。 代码&#xff1a; css .parent {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 200px; /* 父容器需有高度 */ } .child {…...

Electron 项目开机自启动

app.setLoginItemSettings 与 auto-launch 对比分析 一、稳定性对比 1. app.setLoginItemSettings 优点&#xff1a;作为Electron官方API&#xff0c;有官方维护和支持缺点&#xff1a; 在某些Windows版本上存在已知问题部分Windows 10/11更新后可能失效在macOS权限更严格的…...

sql基础

本文多数内容属于个人基于网上资料的理解&#xff0c;如果有问题请告知修改&#xff0c;十分感谢 定义 百度百科&#xff1a;SQL (Structured Query Language) 是具有数据操纵和数据定义等多种功能的数据库语言&#xff0c;这种语言具有交互性特点&#xff0c;能为用户提供极…...

【C++数据库】SQLite3数据库连接与操作

注意:本文代码均为C++20标准下实现 一、SQLite3库安装 1.1 安装库文件 【工具】跨平台C++包管理利器vcpkg完全指南 vcpkg install sqlite3# 集成至系统目录,之前执行过此命令的无需再次执行 vcpkg integrate install1.2 验证代码 在VS2022中新建控制台项目,测试代码如下…...

数据结构——Map和Set

1. 搜索树 1. 概念 ⼆叉搜索树⼜称⼆叉排序树&#xff0c;它可以是⼀棵空树&#xff0c;或者是具有以下性质的⼆叉树: • 若它的左⼦树不为空&#xff0c;则左⼦树上所有节点的值都⼩于根节点的值 • 若它的右⼦树不为空&#xff0c;则右⼦树上所有节点的值都⼤于根节点的值…...

zsh安装以及安装配置oh-my-zsh安装zsh-autosuggestionszsh-syntax-highlighting

下面是安装 zsh 及配置 oh‑my‑zsh 的详细步骤&#xff0c;适用于 Linux 和 macOS 环境&#xff1a; 1. 安装 zsh 1.1 在 macOS 上安装 zsh macOS 通常预装了 zsh&#xff0c;但建议升级到最新版本。你可以通过 Homebrew 来安装最新版&#xff1a; brew install zsh安装完成…...

VMware 安装 Ubuntu 实战分享

VMware 安装 Ubuntu 实战分享 VMware 是一款强大的虚拟机软件&#xff0c;广泛用于多操作系统环境的搭建。本文将详细介绍如何在 VMware 中安装 Ubuntu&#xff0c;并分享安装过程中的常见问题及解决方法。 1. 安装前的准备工作 (1) 系统要求 主机操作系统&#xff1a;Windo…...

【SpringCloud】Eureka的使用

3. Eureka 3.1 Eureka 介绍 Eureka主要分为两个部分&#xff1a; EurekaServer: 作为注册中心Server端&#xff0c;向微服务应用程序提供服务注册&#xff0c;发现&#xff0c;健康检查等能力。 EurekaClient: 服务提供者&#xff0c;服务启动时&#xff0c;会向 EurekaS…...