后台管理系统全屏功能实现

后台管理系统中有一个比较常见的功能就是全屏显示,以方便用最大的屏幕查看系统,特别是在小屏模式下。

对于 screenfull 而言,浏览器本身已经提供了对用的 API,点击这里即可查看,这个 API 中,主要提供了两个方法:

1. Document.exitFullscreen():该方法用于请求从全屏模式切换到窗口模式;

2. Element.requestFullscreen():该方法用于请求浏览器将特定元素置为全屏模式;

但是该方法会存在一定的小问题,比如有些区域背景颜色为黑色。 

所以通常情况下我们不会直接使用该 API 来去实现全屏效果,而是会使用它第三方库。

1. 安装插件

npm i screenfull@5.1.0

2. 封装组件

<template><div><svg-icon:icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"@click="onScreenToggle"/></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from "vue";
import screenfull from "screenfull";// 是否全屏
const isFullscreen = ref(false);// 监听变化
const change = () => {isFullscreen.value = screenfull.isFullscreen;
};// 切换事件
const onScreenToggle = () => {screenfull.toggle();
};// 设置侦听器
onMounted(() => {screenfull.on("change", change);
});// 删除侦听器
onUnmounted(() => {screenfull.off("change", change);
});
</script><style lang="scss" scoped></style>

3. 引入组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/892053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA 20 ,FPGA按键消抖功能解析与实现

目录 前言 一. 具体场景 二. 消抖方法

Ensp基础实验---同网段PC以及网关之间的通信

通过安装ENSP&#xff0c;可以模拟搭建网络仿真环境&#xff0c;初步了解ENSP之后&#xff0c;可以进行一些简单的网络拓扑搭建&#xff0c;通过对相关设备的配置&#xff0c;实现网络畅通的目的 此次模拟的是同一个网段内&#xff0c;两台PC之间的通信情况&#xff0c;同时选用…

C#实现集合分页功能详解:从基础到实践

在C#编程中&#xff0c;分页功能对于处理大量数据集合尤为重要。分页允许我们每次只处理集合中的一部分数据&#xff0c;从而提高应用程序的性能和用户体验。本文将详细介绍如何在C#中实现集合的分页功能。 1. 理解分页的基本概念 分页通常涉及以下几个关键参数&#xff1a; …

No.6十六届蓝桥杯备战|赋值操作符|连续赋值|复合赋值|类型转换|强制|混合|赋值(C++)

赋值操作符 在变量创建的时候给⼀个初始值叫初始化&#xff0c;在变量创建好后&#xff0c;再给⼀个值&#xff0c;这叫赋值。 int a 100; // 初始化 a 200; // 赋值&#xff0c;这⾥使⽤的就是赋值操作符赋值操作符 是⼀个随时可以给变量赋值的操作符&#x…

PID学习资料

TI公司的CONTROLSUITE https://www.ti.com.cn/tool/cn/CONTROLSUITE学点PID专栏-小麦大叔PID控制器算法系列 书籍&#xff1a; Advanced PID Control先进PID控制及其MATLAB仿真Practical PID Control

WinDbg内存泄露追踪

随着win sdk一并安装了&#xff0c;可以在C:\Program Files (x86)\Windows Kits\10\Debuggers\x64 里找到 管理员运行cmd 配置跟踪 cd C:\Program Files (x86)\Windows Kits\10\Debuggers\x64 gflags.exe设置待跟踪的应用程序 gflags.exe /i D:\XXXX.exe ust运行应用程序&am…

4.1.3 串

文章目录 串的基本概念串的基本操作串的存储结构 串的基本概念 串&#xff0c;仅由字符构成的有限序列。 串长&#xff1a;串中的字符个数。空串&#xff1a;长度为0的串。空格串&#xff1a;一个或多个空格构成的串。子串&#xff1a;串中任意长度连续字符构成的序列。含有字…

『SQLite』常见函数的使用

摘要&#xff1a;主要讲解SQLite中的常见函数&#xff0c;有聚合函数、数字函数、字符串函数、日期函数、类型转换函数等。 主要函数 聚合函数&#xff1a;count()、sum()、avg()、min()、max()字符串函数&#xff1a;length()、upper()、lower()、substr()、trim()日期和时间…

RK3588+FPGA全国产异步LED显示屏控制卡/屏幕拼接解决方案

RK3588FPGA核心板采用Rockchip RK3588新一代旗舰 级八核64位处理器&#xff0c;支持8K视频编解码&#xff0c;多屏4K输出&#xff0c;可实现12屏联屏拼接、同显、异显&#xff0c;适配多种操作系统&#xff0c;广泛适用于展览展示、广告内容投放、新零售、商超等领域实现各种媒…

Unity中 Xlua使用整理(一)

1.安装: 从GitHub上下载Xlua源码 Tencent/xLua: xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc. (github.com) 下载Xlua压缩包&#xff0c;并解压将Aseet文件夹中的Xlua和Plugins文件夹复制到Unit…

百度Android最新150道面试题及参考答案 (中)

Android 中一个 View 的显示渲染过程,自定义 View 的时候需要避免什么操作? 一、View 的显示渲染过程 测量(Measure)阶段 这个阶段是 View 渲染的第一步。父容器会调用子 View 的measure()方法来确定子 View 的大小。measure()方法会传入两个参数,即MeasureSpec(测量规格…

【MyBatis-Plus 注解配置】开发中常用注解整理与介绍

不知道朋友们会不会在SpringBoot中集成MyBatis-Plus的时候&#xff0c;总是这个注解那个注解&#xff0c;都不知道哪些是MyBatis-Plus的了&#xff0c;搞得晕乎乎的&#xff0c;所以我整理了一份MyBatis-Plus开发中常用的注解&#xff0c;相信看完你就知道哪些注解是MyBatis-Pl…

vue 什么时候使用v-if 什么时候使用v-show

在 Vue.js 中&#xff0c;v-if 和 v-show 都是用来控制元素的显示与隐藏的指令&#xff0c;但它们的工作方式和适用场景有所不同。了解两者的区别可以帮助你选择合适的指令来优化应用性能。 v-if 条件渲染&#xff1a;v-if 是“真正的”条件渲染&#xff0c;因为它会根据表达…

MBTiles 及爬取到发布

MBTiles &#xff1a;https://github.com/mapbox/mbtiles-spec/blob/master/1.3/spec.md 1.MBTiles是什么 MBTiles是一个在SQLite 数据库存储瓦片地图数据的标准&#xff0c;该标准的目的是即时传输和使用数据。 作为一个容器格式&#xff0c;MBTiles可以存储任何瓦片数据,…

SpringBoot数据层解决方案

文章目录 1. 数据层解决方案2. 数据源技术 1. 数据层解决方案 现有数据层解决方案技术选型&#xff1a;Druid MyBatis-Plus MySQL 数据源&#xff1a;DruidDataSource持久化技术&#xff1a;MyBatis-Plus / MyBatis数据库&#xff1a;MySQL 下面的研究就分为三个层面进行研…

00_basic_gemm

说明 这里研究的cutlass版本是3.5 gemm讲解 using CutlassGemm cutlass::gemm::device::Gemm<float, // Data-type of A matrixColumnMajor, // Layout of A matrixfloat, // Data-type of B matrixColumnMajor, // Layout of B matrixfloat, // …

永磁同步电机模型预测控制——模型预测研究现状

永磁同步电机 (PMSM) 模型预测控制 (MPC) 研究现状 永磁同步电机 (PMSM) 控制系统是一个强耦合的非线性系统&#xff0c;传统的磁场定向控制 (FOC) 和直接转矩控制 (DTC) 在一些高性能特殊应用场合下难以满足控制需求。为了应对这些挑战&#xff0c;研究人员在 FOC 和 DTC 的基…

Clisoft SOS设置Server和Project

Clisoft SOS设置Server和Project 一、关于SOS Servers、Clients、Projects和Work Areas 以下三个图是官方文档中介绍的三种情况 图1&#xff1a;带有两个客户端的SOS服务器 图2&#xff1a;使用本地缓存服务器 图3&#xff1a;远程设计团队的缓存服务器 因为SOS软件需要…

gaussdb中怎么查询一个表有多少GB

在 GaussDB 中&#xff0c;你可以通过多种方法查询一个表的大小&#xff0c;包括使用系统视图和内置函数。以下是几种常见的方法&#xff1a; 1. 使用 pg_total_relation_size 函数 pg_total_relation_size 函数返回一个表及其所有索引和 TOAST 数据的总大小。 示例查询 SE…

[python3]Excel解析库-calamine,10倍openpyxl性能

calamine 是一个用于读取多种电子表格格式&#xff08;如 Excel、LibreOffice Calc 等&#xff09;的 Python 库。它支持 .xls, .xlsx, .ods 和 .csv 文件格式&#xff0c;提供了简单易用的 API 来加载和处理电子表格数据。calamine 的一大特点是它的轻量级和高效性&#xff0c…