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

vue3 指定元素全屏 screenfull(可直接粘贴使用)

业务需求

由于输入的文字较多,需要将输入框进行全屏展示,方便输入和查看!

效果图

在这里插入图片描述
在这里插入图片描述

实现方式

  1. 下载插件"screenfull": “^6.0.2” yarn add screenfull -S
  2. 项目中使用 import screenfull from "screenfull"
  3. 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>
  1. 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;}
};
  1. 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(可直接粘贴使用)

业务需求 由于输入的文字较多&#xff0c;需要将输入框进行全屏展示&#xff0c;方便输入和查看&#xff01; 效果图 实现方式 下载插件"screenfull": “^6.0.2” yarn add screenfull -S项目中使用 import screenfull from "screenfull"templte中代码…...

【规范】Git Commit 约定式提交规范

文章目录 前言介绍使用约定式提交规范的好处提交信息格式信息头部&#xff08;Header&#xff09;正文&#xff08;Body&#xff09;脚注&#xff08;Footer&#xff09;撤销&#xff08;Revert&#xff09; 提交类型表格官网 前言介绍 约定式提交规范它是一种基于提交信息的轻…...

GDB的基本使用方法(之一)

1.编译程序 如果要让GDB调试程序,则编译生成程序时,要添加-g编译选项: $gcc -Wall -O2 -g 源文件 编译器含有针对源代码中的各种各样的错误输出信息的功能,称为警告选项。这些信息并不一定是错误,但却指出了容易引发bug的编码方式。-Werror选项可以在警告发生时,将其当…...

DoubletFinder去除双细胞分析学习

在单细胞RNA测序过程中&#xff0c;有时两个或多个细胞可能在制备过程中意外结合成一个单一的"假细胞"&#xff0c;称为双峰细胞或双倍体。这些双峰细胞可能会扭曲数据分析和解释&#xff0c;因此&#xff0c;需要使用一些方法对它们进行识别和剔除。其中DoubletFind…...

软考高级第四版备考---第四十八天(项目基本要素-项目项目、项目集、项目组合和运营管理之间的关系)

一、概述&#xff1a; 项目集是一组相互关联且被协调管理的项目、子项目集和项目集活动&#xff0c;目的是为了获得分别管理无法获得的利益。项目集不是大项目&#xff0c;大项目是指规模、影响等特别大的项目&#xff1b; 项目组合是指为实现战略目标而组合在一起管理的项目、…...

系统架构设计师:信息系统基础知识

简简单单 Online zuozuo: 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo :本心、输入输出、结果 简简单单 Online zuozuo : 文章目录 系统架构设计师:信息系统基础知识前言信息系统构成:信息系统功能:信息系统生命周期…...

微服务-nacos

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

快速上手 | 数据可观测性平台 Datavines 自定义SQL规则使用指南

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

MySQL零基础入门教程-6 查询去重、内外连接查询、子查询、分页查询DQL,基础+实战

教程来源&#xff1a;B站视频BV1Vy4y1z7EX 001-数据库概述_哔哩哔哩_bilibili 我听课收集整理的课程的完整笔记&#xff0c;供大家学习交流下载&#xff1a;夸克网盘分享 本文内容为完整笔记的第六篇 分组查询&DQL总结P41-P66 1、把查询结果去除重复记录 注意&#xf…...

Elastic:如何将数据转化为可操作的见解?

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

基于SSM和VUE的药品管理系统(含源码+sql+视频导入教程+文档)

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

机器学习--神经网络

神经网络 计算 神经网络非常简单&#xff0c;举个例子就理解了&#xff08;最后一层的那个写错了&#xff0c;应该是 a 1 ( 3 ) a^{(3)}_1 a1(3)​&#xff09;&#xff1a; n o t a t i o n notation notation&#xff1a; a j ( i ) a^{(i)}_j aj(i)​ 表示第 i i i 层的…...

post请求中有[]报400异常

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

ad22 如何在pcb 的keepout layout 上画线 然后裁出想要的黑色画布大小

选择下面的keepout layout&#xff0c;然后右键打开&#xff0c;然后按照这个图进行选择 然后看这个界面我收藏的第三个&#xff0c;就可以了...

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&#xff0c;在使用 synchronized 实现同步的时候&#xff0c;需要使用当前监视器的以上方法&#xff…...

windows下自启springboot项目(jar+nginx)

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

解锁SAP数据的潜力:SNP Glue与SAP Datasphere的协同作用

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

Missing package to enable rendering OpenAI Gym in Colab

题意&#xff1a;“缺少用于在 Colab 中渲染 OpenAI Gym 的软件包。” 问题背景&#xff1a; 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 训练效率

简单概述 现在&#xff0c;在 Hugging Face 中&#xff0c;使用打包的指令调整示例 (无需填充) 进行训练已与 Flash Attention 2 兼容&#xff0c;这要归功于一个最近的 PR以及新的DataCollatorWithFlattening。 最近的 PRhttps://github.com/huggingface/transformers/pull/3…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...