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

vue3+screenfull实现部分页面全屏(遇到的问题会持续更新)

需求:除了左侧菜单,右侧主体部分全部全屏

在这里插入图片描述

首先下载screenfull全屏插件

npm install screenfull --save

页面引入

import screenfull from 'screenfull';

我这里是右上角全屏图标

<el-iconref="elIconRef"color="#ffffff"size="24px"@click="onClick($event)"class="dry-touchscreen_elIcon">
<full-screen />
</el-icon>

Ts代码:

const function onClick(){screenfull.toggle();
}

问题一:

因为用的是飞速低代码开发平台,此时会出现一堆BUG,类似于你全屏页面上有Dialog的话,在全屏的时候不会显示。
这个时候你就可以按照以下代码写。
注意这个stage.value是你页面最最最外层的ref,不懂的同学可以看代码下边的截图。

const function onClick(){screenfull.toggle(stage.value);
}

在这里插入图片描述
到此为止全屏后Dialog不出现的问题解决了,一开始以为是z-index的问题,加上以后不是,就是挂在到最外层的DOM上。

问题二:

如果Dialog弹框内容有表格且表格里面有Select的话,非全屏状态下下拉框可以展开。
在这里插入图片描述
而全屏下,下拉框不能展开。
在这里插入图片描述
在这里也想到过层级的问题,挂在DOM的问题,来看一下解决方法吧。

可以看到上面截图上有两个下拉框,表格里面的是飞速低代码生成的,右上角的是我用ElementPlus写的。

1:先解决一下ElementPlus的加入以下代码就可以了。stage是我最最最外层的DOM

:teleported="false"@append-to="stage"
<el-select:teleported="false"@append-to="stage"
><el-optionv-for="item in classTeamList":key="item.id":label="item.name":value="item.id"/>
</el-select>

在这里有个疑问ElementPlus官网上给到的是teleported是true的话才会挂在到@append-to="stage"这个DOM元素上,但是此时我设置false,在全屏时候下拉框可以展开,true的时候下拉框还是展开不了,希望知道的大佬,麻烦解释一下。
在这里插入图片描述
好了,加上以上代码,可以解决全屏情况下,下拉框不展示。
在这里插入图片描述

2:再来解决一下表格里边的下拉框。

在这个下拉框里想到了,DOM挂在,是不是全屏插件的BUG,等等一些列能解决的,甚至在表格里用ElementPlus手写一个Select,都解决不了,当我在快为这个问题崩溃的时候,在想会不会是CSS的问题,就尝试解决CSS的问题。结果还真是CSS问题。

 position: fixed;

加上固定定位就可以了。
在这里插入图片描述

问题三:全屏的时候Message 消息提示不显示了,非全屏可以显示

正在解决…

相关文章:

vue3+screenfull实现部分页面全屏(遇到的问题会持续更新)

需求&#xff1a;除了左侧菜单&#xff0c;右侧主体部分全部全屏 首先下载screenfull全屏插件 npm install screenfull --save页面引入 import screenfull from screenfull;我这里是右上角全屏图标 <el-iconref"elIconRef"color"#ffffff"size"2…...

Ubuntu 下 nginx-1.24.0 源码分析 (1)

main 函数在 src\core\nginx.c int ngx_cdecl main(int argc, char *const *argv) {ngx_buf_t *b;ngx_log_t *log;ngx_uint_t i;ngx_cycle_t *cycle, init_cycle;ngx_conf_dump_t *cd;ngx_core_conf_t *ccf;ngx_debug_init(); 进入 main 函数 最…...

2025数据存储技术风向标:解析数据湖与数据仓库的实战效能差距

一、技术演进的十字路口 当前全球数据量正以每年65%的复合增长率激增&#xff0c;IDC预测到2027年企业将面临日均处理500TB数据的挑战。在这样的背景下&#xff0c;传统数据仓库与新兴数据湖的博弈进入白热化阶段。Gartner最新报告显示&#xff0c;采用混合架构的企业数据运营效…...

探索高性能AI识别和边缘计算 | NVIDIA Jetson Orin Nano 8GB 开发套件的全面测评

随着边缘计算和人工智能技术的迅速发展&#xff0c;性能强大的嵌入式AI开发板成为开发者和企业关注的焦点。NVIDIA近期推出的Jetson Orin Nano 8GB开发套件&#xff0c;凭借其40 TOPS算力、高效的Ampere架构GPU以及出色的边缘AI能力&#xff0c;引起了广泛关注。本文将从配置性…...

数据结构 常见的排序算法

&#x1f33b;个人主页&#xff1a;路飞雪吖~ &#x1f320;专栏&#xff1a;数据结构 目录 &#x1f33b;个人主页&#xff1a;路飞雪吖~ 一、插入排序 &#x1f31f;直接插入排序 &#x1f31f;希尔排序 二、选择排序 &#x1f31f;选择排序 &#x1f31f;堆排序…...

ES索引知识

索引是数据的载体&#xff0c;存储了文档和映射的信息 索引是具有相同结构的文档的合集体。 设置索引&#xff0c;不仅仅是设置索引名字&#xff0c;还有索引的一些配置&#xff0c;比如&#xff1a;分片和副本&#xff0c;刷新频率&#xff0c;搜索结果的最大参数&#xff0c…...

FreeRTOS第17篇:FreeRTOS链表实现细节05_MiniListItem_t:FreeRTOS内存优化

文/指尖动听知识库-星愿 文章为付费内容,商业行为,禁止私自转载及抄袭,违者必究!!! 文章专栏:深入FreeRTOS内核:从原理到实战的嵌入式开发指南 1 为什么需要迷你列表项? 在嵌入式系统中,内存资源极其宝贵。FreeRTOS为满足不同场景需求,设计了标准列表项(ListItem_…...

Golang | Gin(简洁版)

文章目录 安装使用RESTful API响应页面获取请求参数路由讲解中间件 安装使用 Gin 是一个 golang 的微框架&#xff0c;封装比较优雅&#xff0c;API 友好&#xff0c;源代码比较明确。具有快速灵活&#xff0c;容错方便等特点。其实对于 golang 而言&#xff0c;web 框架的依赖…...

RAG外挂知识库

目录 RAG的工作流程 python实现RAG 1.引入相关库及相关准备工作 函数 1. 加载并读取文档 2. 文档分割 3. embedding 4. 向集合中添加文档 5. 用户输入内容 6. 查询集合中的文档 7. 构建Prompt并生成答案 主流程 附录 函数解释 1. open() 函数语法 2.client.embe…...

Rust语言:开启高效编程之旅

目录 一、Rust 语言初相识 二、Rust 语言的独特魅力​ 2.1 内存安全:消除隐患的护盾​ 2.2 高性能:与 C/C++ 并肩的实力​ 2.3 强大的并发性:多线程编程的利器​ 2.4 跨平台性:适配多环境的优势​ 三、快速上手 Rust​ 3.1 环境搭建:为开发做准备​ 3.2 第一个 R…...

蓝桥杯备考:图论初解

1&#xff1a;图的定义 我们学了线性表和树的结构&#xff0c;那什么是图呢&#xff1f; 线性表是一个串一个是一对一的结构 树是一对多的&#xff0c;每个结点可以有多个孩子&#xff0c;但只能有一个父亲 而我们今天学的图&#xff01;就是多对多的结构了 V表示的是图的顶点集…...

Codeforces Round 502 E. The Supersonic Rocket 凸包、kmp

题目链接 题目大意 平面上给定两个点集&#xff0c;判定两个点集分别形成的凸多边形能否通过旋转、平移重合。 点集大小 ≤ \leq ≤ 1 0 5 10^{5} 105&#xff0c;坐标范围 [0, 1 0 8 10^{8} 108 ]. 思路 题意很明显&#xff0c;先求出凸包再判断两凸包是否同构。这里用…...

机器人匹诺曹机制,真话假话平衡机制

摘要&#xff1a; 本文聚焦于机器人所采用的一种“匹诺曹机制”&#xff0c;该机制旨在以大概率保持“虚拟鼻子”&#xff08;一种象征虚假程度的概念&#xff09;不会过长&#xff0c;通过在对话中夹杂真话与假话来实现。文章深入探讨了这一机制的原理&#xff0c;分析其背后的…...

用Python分割并高效处理PDF大文件

在处理大型PDF文件时&#xff0c;将它们分解成更小、更易于管理的块通常是有益的。这个过程称为分区&#xff0c;它可以提高处理效率&#xff0c;并使分析或操作文档变得更容易。在本文中&#xff0c;我们将讨论如何使用Python和为Unstructured.io库将PDF文件划分为更小的部分。…...

【RAG】混合检索(Hybrid Search) 提高检索精度

1.问题&#xff1a;向量检索也易混淆&#xff0c;而关键字会更精准 在实际生产中&#xff0c;传统的关键字检索&#xff08;稀疏表示&#xff09;与向量检索&#xff08;稠密表示&#xff09;各有利弊。 举个具体例子&#xff0c;比如文档中包含很长的专有名词&#xff0c; 关…...

CTFHub-FastCGI协议/Redis协议

将木马进行base64编码 <?php eval($_GET[cmd]);?> 打开kali虚拟机&#xff0c;使用虚拟机中Gopherus-master工具 Gopherus-master工具安装 git clone https://github.com/tarunkant/Gopherus.git 进入工具目录 cd Gopherus 使用工具 python2 "位置" --expl…...

【算法day4】最长回文子串——动态规划方法

最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的 回文 子串。 https://leetcode.cn/problems/longest-palindromic-substring/submissions/607962358/ 动态规划&#xff1a; 回文串即是从前面开始读和从后面开始读&#xff0c;读出来的字符串均相同的字符串&#…...

C++之“string”类的模拟实现

​ &#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;C入门 前言 hello &#xff0c;大家又来跟着bear学习了。一起奔向更好的自己&#xff0c;上篇博客已经讲清楚了string的一些功能的使用。我们就实现一些主要的功…...

请谈谈 HTTP 中的安全策略,如何防范常见的Web攻击(如XSS、CSRF)?

一、Web安全核心防御机制 &#xff08;一&#xff09;XSS攻击防御&#xff08;跨站脚本攻击&#xff09; 1. 原理与分类 ​存储型XSS&#xff1a;恶意脚本被持久化存储在服务端&#xff08;如数据库&#xff09;​反射型XSS&#xff1a;脚本通过URL参数或表单提交触发执行​…...

Python Flask 渲染静态程动态页面

Python Flask 渲染静态程动态页面 Python Flask 渲染静态程动态页面 Python Flask 渲染静态程动态页面 对网页应用程序来说&#xff0c;静态内容是重要的&#xff0c;因为它们包括 CSS 和 JavaScript 文件。静态文件可以直接由网页服务器提供。如果我们在我们的项目中创建一个…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...