vue3 指定元素全屏 screenfull(可直接粘贴使用)
业务需求
由于输入的文字较多,需要将输入框进行全屏展示,方便输入和查看!
效果图
实现方式
- 下载插件"screenfull": “^6.0.2”
yarn add screenfull -S
- 项目中使用
import screenfull from "screenfull"
- templte中代码
<div ref="textareaRef" class="screenFull"><el-icon class="screen_icon" @click.stop.prevent="handleScreen"><FullScreen /></el-icon><el-inputid="inputElement"v-model="noteData.noteText":rows="rowSize"maxlength="5000":autofocus="true"type="textarea"placeholder="有什么手记想分享给大家?"/></div>
- javascript代码
import { ref } from "vue";const textareaRef = ref(null);
const rowSize = ref("3");// 点击esc和x号退出全屏
const handleResize = () => {// 写法一 start // document.webkitIsFullScreen 用来判断是否按了ESC和X号取消全屏 (webkitIsFullScreen有兼容性问题)if (!document.webkitIsFullScreen) {screenfull.exit();rowSize.value = "3";textareaRef.value.style.width = "100%";textareaRef.value.style.height = "";}// 写法一 end// 写法二 start 推荐if (!screenfull.isFullscreen) {screenfull.exit();rowSize.value = "3";if (textareaRef.value) {textareaRef.value.style.width = "100%";textareaRef.value.style.height = "";}}// 写法二 start
};// 全屏
const handleScreen = () => {if (screenfull.isEnabled) {screenfull.toggle(textareaRef.value);rowSize.value = Math.floor(window.innerHeight / 17).toString(); // 该属性不能完成保证高度为多少行textareaRef.value.style.width = "100%";textareaRef.value.style.height = "100vh";textareaRef.value.style.backgroundColor = "#ffffff";window.onresize = handleResize;}
};
- style代码
<style lang="scss" scoped>
.screenFull {position: relative;
}.screen_icon {position: absolute;top: 10px;right: 6px;z-index: 10;cursor: pointer;font-size: 15px;
}
</style>
相关文章:

vue3 指定元素全屏 screenfull(可直接粘贴使用)
业务需求 由于输入的文字较多,需要将输入框进行全屏展示,方便输入和查看! 效果图 实现方式 下载插件"screenfull": “^6.0.2” yarn add screenfull -S项目中使用 import screenfull from "screenfull"templte中代码…...
【规范】Git Commit 约定式提交规范
文章目录 前言介绍使用约定式提交规范的好处提交信息格式信息头部(Header)正文(Body)脚注(Footer)撤销(Revert) 提交类型表格官网 前言介绍 约定式提交规范它是一种基于提交信息的轻…...
GDB的基本使用方法(之一)
1.编译程序 如果要让GDB调试程序,则编译生成程序时,要添加-g编译选项: $gcc -Wall -O2 -g 源文件 编译器含有针对源代码中的各种各样的错误输出信息的功能,称为警告选项。这些信息并不一定是错误,但却指出了容易引发bug的编码方式。-Werror选项可以在警告发生时,将其当…...

DoubletFinder去除双细胞分析学习
在单细胞RNA测序过程中,有时两个或多个细胞可能在制备过程中意外结合成一个单一的"假细胞",称为双峰细胞或双倍体。这些双峰细胞可能会扭曲数据分析和解释,因此,需要使用一些方法对它们进行识别和剔除。其中DoubletFind…...
软考高级第四版备考---第四十八天(项目基本要素-项目项目、项目集、项目组合和运营管理之间的关系)
一、概述: 项目集是一组相互关联且被协调管理的项目、子项目集和项目集活动,目的是为了获得分别管理无法获得的利益。项目集不是大项目,大项目是指规模、影响等特别大的项目; 项目组合是指为实现战略目标而组合在一起管理的项目、…...
系统架构设计师:信息系统基础知识
简简单单 Online zuozuo: 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo : 文章目录 系统架构设计师:信息系统基础知识前言信息系统构成:信息系统功能:信息系统生命周期…...

微服务-nacos
nacos-注册中心 启动 服务注册到nacos...

快速上手 | 数据可观测性平台 Datavines 自定义SQL规则使用指南
摘要 本文主要介绍在 Datavines平台已有规则不能满足需求的情况下,如何通过自定义SQL规则来实现基于业务特性的数据质量检查。 规则介绍 自定义聚合SQL规则是 Datavines 平台中内置的一个灵活的规则,该规则允许用户通过编写SQL的方式来实现想要的数据质…...

MySQL零基础入门教程-6 查询去重、内外连接查询、子查询、分页查询DQL,基础+实战
教程来源:B站视频BV1Vy4y1z7EX 001-数据库概述_哔哩哔哩_bilibili 我听课收集整理的课程的完整笔记,供大家学习交流下载:夸克网盘分享 本文内容为完整笔记的第六篇 分组查询&DQL总结P41-P66 1、把查询结果去除重复记录 注意…...

Elastic:如何将数据转化为可操作的见解?
作者:来自 Elastic Elastic Platform Team 一切,从某种程度上说,每个人,都是数据。在我们这个数据驱动的世界里,我们的兴趣和互动被统计和分类,为组织提供如何创造更好的产品和更好的体验的见解。更不用说&…...

基于SSM和VUE的药品管理系统(含源码+sql+视频导入教程+文档)
👉文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM和VUE的药品管理系统2拥有两种角色 管理员:药品管理、出库管理、入库管理、销售员管理、报损管理等 销售员:登录注册、入库、出库、销售、报损等 1.1 背景…...

机器学习--神经网络
神经网络 计算 神经网络非常简单,举个例子就理解了(最后一层的那个写错了,应该是 a 1 ( 3 ) a^{(3)}_1 a1(3)): n o t a t i o n notation notation: a j ( i ) a^{(i)}_j aj(i) 表示第 i i i 层的…...

post请求中有[]报400异常
序言 在和前端同学联调的时候,发现只要post请求参数里面有[],就会报400的错误 可以看到日志中: The valid characters are defined in RFC 7230 and RFC 3986 解决办法: 参考了博客: spring boot 中解决post请求中有…...

ad22 如何在pcb 的keepout layout 上画线 然后裁出想要的黑色画布大小
选择下面的keepout layout,然后右键打开,然后按照这个图进行选择 然后看这个界面我收藏的第三个,就可以了...

SparkSQL SET和RESET
前言 我们在用代码写spark程序的时候,如果要设置一些配置参数,可以通过: SparkConf val conf = new SparkConf().setMaster("local[2]").setAppName("CountingSheep") val sc = new SparkContext(conf)spark-submit ./bin/spark-submit --name "M…...
java 中线程的等待和唤醒
java.lang.Object#wait() java.lang.Object#wait(long) java.lang.Object#wait(long, int) java.lang.Object#notify() java.lang.Object#notifyAll() 这几个方法属于Object,在使用 synchronized 实现同步的时候,需要使用当前监视器的以上方法ÿ…...

windows下自启springboot项目(jar+nginx)
1、将springboot项目打包为jar 2、新建文本文档 test.txt,并输入 java -jar D:\test\test.jar(修改为自己的jar包位置) 保存 然后修将后缀名改为 .bat 3、在同一目录再新建 文本文档test.txt,输入以下内容,&…...

解锁SAP数据的潜力:SNP Glue与SAP Datasphere的协同作用
在各种文章中,我们研究了客户如何利用SNP Glue与基于云的数据仓库和数据湖相结合,以充分利用其SAP数据。SNP Glue 通过高性能集成解决方案帮助客户解锁 SAP 数据孤岛。例如,可以使用SNP Glue先进的增量捕获(CDC)近乎实…...

Missing package to enable rendering OpenAI Gym in Colab
题意:“缺少用于在 Colab 中渲染 OpenAI Gym 的软件包。” 问题背景: Im attempting to render OpenAI Gym environments in Colab via a Mac using the StarAI code referenced in previous questions on this topic. However, it fails. The key erro…...

通过打包 Flash Attention 来提升 Hugging Face 训练效率
简单概述 现在,在 Hugging Face 中,使用打包的指令调整示例 (无需填充) 进行训练已与 Flash Attention 2 兼容,这要归功于一个最近的 PR以及新的DataCollatorWithFlattening。 最近的 PRhttps://github.com/huggingface/transformers/pull/3…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...

Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生,系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler,它是Thread的子类(就是package java.lang;里线程的Thread)。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
TJCTF 2025
还以为是天津的。这个比较容易,虽然绕了点弯,可还是把CP AK了,不过我会的别人也会,还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...