当前位置: 首页 > 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…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...