vue实现全屏screenfull-封装组件
1. 安装依赖
npm install --save screenfull
2. 引用
import screenfull from "screenfull"
3.封装fullScreen/index:
<template><div><el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom"><i class="el-icon-full-screen" @click="handleFullscreenClick"></i></el-tooltip></div>
</template><script>
import screenfull from 'screenfull'export default {props: {element: {type: String,default: 'html'},openTips: {type: String,default: 'Fullscreen'},exitTips: {type: String,default: 'Exit Fullscreen'},content: {type: Boolean,default: false}},data() {return {isFullscreen: false};},computed: {fullscreenTips() {return this.isFullscreen ? this.exitTips : this.openTips;},},methods: {handleFullscreenClick() {const dom = document.querySelector(this.element) || undefined;if (screenfull.enabled) {screenfull.toggle(dom);this.isFullscreen = screenfull.isFullscreen;}},handleFullscreenChange() {this.isFullscreen = screenfull.isFullscreen;// Clear all classes when exiting fullscreenif (!this.isFullscreen) {document.body.className = '';}},handleKeyDown(event) {// 检查是否按下了 ESC 键if (event.key === 'Escape' && screenfull.isFullscreen) {this.$message.warning('按 ESC 键可以退出全屏模式');}}},mounted() {if (screenfull.enabled) {screenfull.on('change', this.handleFullscreenChange);document.addEventListener('keydown', this.handleKeyDown);}},beforeDestroy() {if (screenfull.enabled) {screenfull.off('change', this.handleFullscreenChange);document.removeEventListener('keydown', this.handleKeyDown);}}
};
</script>
4.vue页面使用
<template><div class="warpper" style="" id="digital-screen"><div class="chartTitle"><div class="logo"> 2024年6月17日 </div><div class="name"> 易恒智能模糊测试系统数据监控 </div><div class="time"><Screenfull class="right-menu-item" :element="'#digital-screen'"/></div></div>
</div>
全屏的按钮根据实际需求更换!
very easy!!!
相关文章:
vue实现全屏screenfull-封装组件
1. 安装依赖 npm install --save screenfull 2. 引用 import screenfull from "screenfull" 3.封装fullScreen/index: <template><div><el-tooltip v-if"!content" effect"dark" :content"fullscreenTips" placement&…...
【LinkedList与链表】
目录 1,ArrayList的缺陷 2,链表 2.1 链表的概念及结构 2.2 链表的实现 2.2.1 无头单向非循环链表实现 3,LinkedList的模拟实现 3.1 无头双向链表实现 4,LinkedList的使用 4.1 什么是LinkedList 4.2 LinkedList的使用 5…...
为数据安全护航,袋鼠云在数据分类分级上的探索实践
在大数据时代,数据具有多源异构的特性,且价值各异,企业需依据数据的重要性、价值指数等予以区分,以利采取不同的数据保护举措,避免数据泄露。故而,数据分类分级管理属于数据安全保护中极为重要的环节之一。…...
Spring 循环依赖详解
Spring 循环依赖详解 1. 引言 在Spring框架中,依赖注入(Dependency Injection, DI)是其核心功能之一,它通过配置来管理对象的创建和它们之间的依赖关系。然而,在复杂的应用程序中,开发人员有时会遇到循环…...
项目经理真的不能太“拧巴”
前期的项目经理经常是“拧巴”的,就是心里纠结、思路混乱、行动迟缓。对于每天需要面对各种挑战、协调各方资源、确保项目顺利进行的项目经理来说,这种“拧巴”不仅会让自己陷入内耗中,还会让项目出大问题。 项目计划总是改来改去࿰…...
企业如何选择合适的CRM工具?除Salesforce之外的10大主流选择
对比salesforce,其他10款优秀CRM:纷享销客CRM、Zoho CRM、腾讯企点、销售易、企业微信 (WeCom)、Odoo CR、OroCRM、金蝶、用友CRM、EspoCRM 虽然Salesforce以其全面的功能和强大的市场占有率在海外收获了许多客户,但Salesforce在国内市场的接…...
每年1-1.2万人毕业,男女比例约3:1,测绘工程的就业率如何
测绘工程,一个让人闻风丧胆的理科专业,虎扑评分4.2: 干过测绘的,苦不苦只有大家心里知道,带大家来感受一下,兄弟们的精神状态都十分美妙: 测绘专业到底是什么情况? PS.测绘分为本科…...
JimuReport 积木报表 v1.7.6 版本发布,免费的低代码报表
项目介绍 一款免费的数据可视化报表工具,含报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等! Web 版报表设计器,类似于excel操作风格,通过拖拽完…...
“灵活就业者“超两亿人 游戏开发者如何破局?
随着“灵活就业”者数量突破两亿,我相信“寒气”已经传递到每一位普通人!对于游戏行业的“灵活就业”者,应当如何破局? 首先应该恭喜大家,选择了一个相对“稳健”的行业,无论大环境如何,游戏/软…...
MySQL事务与存储引擎
一、事务的概念 是一种机制、一个操作序列,包含了一组数据库操作命令,并且把所有的命令作为一个整体一起向系统提交或撤销操作请求,即这一组数据库命令要么都执行,要么都不执行是一个不可分割的工作逻辑单元,在数据库…...
总是给数据库表字段设置默认值的好处
1、NOT NULL DEFAULT 的好处 在设计数据库表结构时,将字段设置为不能为空并设置默认值有以下几种好处: 1.1、数据完整性 通过设置字段不能为空,可以确保每条记录都包含必要的数据,从而保证了数据的完整性。例如,在用…...
11.2 Go 常用包介绍
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...
Sqlite3数据库基本使用
一、基本概念 数据:能够输入计算机并能被计算机程序识别和处理的信息集合 数据库:长期存储在计算机内、有组织的、可共享的大量数据的集合 DBMS:位于用户与操作系统之间的一层数据管理软件,用于操纵和管理数据库 二、安装 在线…...
实现贪吃蛇小游戏【简单版】
1. 贪吃蛇游戏设计与分析 1.1 地图 我们最终的贪吃蛇大纲要是这个样子,那我们的地图如何布置呢? 这里不得不讲⼀下控制台窗口的⼀些知识,如果想在控制台的窗口中指定位置输出信息,我们得知道该位置的坐标,所以首先介…...
uniapp实现内嵌其他网页的功能
一、用到的知识点 页面跳转页面间跳转,参数传递web-view使用 二、使用navigator 页面跳转。 navigator 组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。所以这么写是不行的: <navigator url&quo…...
【Ruby简单脚本01】查看wifi密码
脚本 # 使用io库 def get_cmd_result(cmd) IO.popen(cmd,:external_encoding>GBK).read.encode("utf-8") end def list_wifi wifi_pwds Hash.new # 获取所有wifi文件 o1 get_cmd_result("netsh wlan show profiles") # 获取所有匹配结果 …...
VSG/VSA 矢量信号模拟/分析软件
_Ceyear思仪 _ VSG/VSA 矢量信号模拟/分析软件 苏州新利通仪器仪表 在现代无线通信中,IQ调制属于标准配置,经常应用于通信系统的信号调制和解调环节。IQ调制的应用简化了通信设备的硬件结构,同时提高了频谱资源的利用效率,提…...
C++使用GDAL库完成tiff图像的合并
全色图 完整代码: #include "gdal_priv.h" #include "cpl_string.h" #include <vector> #include <algorithm> #include <iostream> #include <filesystem>using namespace std; namespace fs std::filesystem; vec…...
深入理解AQS:Java并发编程中的核心组件
目录 AQS简介AQS的设计思路AQS的核心组成部分 状态(State)同步队列(Sync Queue)条件队列(Condition Queue) AQS的内部实现 节点(Node)锁的获取与释放 独占锁共享锁 条件变量 AQS的应…...
集合进阶:List集合
一.List集合的特有方法 1.Collection的方法List都继承了 2.List集合因为有索引,所以多了很多索引操作的方法。 3.add // 1.创建一个集合List<String> list new ArrayList<>(); // 2.添加元素list.add("aaa");list.add("bbb"…...
别再为多设备同步发愁了!手把手教你用NI-DAQmx的‘通道扩展’功能搞定多机箱数据采集
多设备数据采集同步实战:NI-DAQmx通道扩展功能深度解析 在工业测试与科研数据采集领域,工程师们经常面临一个棘手问题:当单个数据采集设备的通道数无法满足需求时,如何实现多个设备的无缝协同工作?想象一下汽车ECU测试…...
GE 图执行引擎:CANN 推理的计算图编排中心
在 CANN 的五层架构里,GE 处在 AscendCL 和 Runtime 之间的枢纽位置。它不直接参与算子计算,不管理 NPU 资源,但它决定了"这张计算图怎么跑"——算子的执行顺序、哪些可以并发的、哪些可以融合的、中间 Tensor 放哪。 GEÿ…...
Servlet 容器 vs Spring 容器 超详细对比
目录 一、先搞懂两个容器本质 1. Servlet 容器(Web 容器) 2. Spring 容器(IoC 容器) 二、核心相同点 三、核心不同点(重点) 四、最直白通俗理解 五、Web 项目完整启动顺序(必背面试题) 容器层级关系 六、请求处理流程差异 1. 原生 Servlet 模式(只有 Servle…...
阅读APP书源导入与使用完全指南:26个高质量书源一键获取
阅读APP书源导入与使用完全指南:26个高质量书源一键获取 【免费下载链接】Yuedu 📚「阅读」自用书源分享 项目地址: https://gitcode.com/gh_mirrors/yu/Yuedu 还在为「阅读」APP找不到稳定的小说书源而烦恼吗?这款开源阅读工具需要自…...
当“数字孪生”有了坐标、时序和一棵“会落叶的树”:NNU‑Campus‑Geo3DGS 数据集深度解读
地理编码的3D高斯,联结了数字重建与“真实地面”之间的两条坐标轴线假设你是一名城市规划师,面对一座城市的数字孪生模型——楼宇轮廓完整、道路走向清晰、绿化植被葱郁——但无论怎样旋转视角,这座模型都“悬浮”在地理基准面之上࿰…...
Windows字体自定义终极指南:用No!! MeiryoUI轻松美化系统界面
Windows字体自定义终极指南:用No!! MeiryoUI轻松美化系统界面 【免费下载链接】noMeiryoUI No!! MeiryoUI is Windows system font setting tool on Windows 8.1/10/11. 项目地址: https://gitcode.com/gh_mirrors/no/noMeiryoUI 还在为Windows系统千篇一律的…...
ElevenLabs甘肃话语音合成技术解析(西北方言TTS工程化白皮书)
更多请点击: https://intelliparadigm.com 第一章:ElevenLabs甘肃话语音合成技术概览 ElevenLabs 是全球领先的语音合成平台,原生支持英语、西班牙语、法语等数十种主流语言,但**不直接内置甘肃话(属中原官话秦陇片&a…...
盒子不同定位的解说!
目录 一、相对定位 二、绝对定位 三、固定定位 一、相对定位 【概念】:简单来说,就是让一个元素相对于它自己原本应该在的位置进行移动。 【核心特点】:1.不脱离文档流:这是相对定位最关键的特点。元素虽然移动了,…...
新手入门指南,五分钟完成Taotoken账号注册与第一个API调用
🚀 告别海外账号与网络限制!稳定直连全球优质大模型,限时半价接入中。 👉 点击领取海量免费额度 新手入门指南,五分钟完成Taotoken账号注册与第一个API调用 对于初次接触大模型API的开发者来说,如何快速上…...
为什么四羟基合铝酸钠中的羟基明明是氢氧根离子却叫做羟基?
一、为什么四羟基合铝酸钠中的「羟基」明明是 OH⁻ 离子,却叫做「羟基」? 这是一个很好的概念辨析问题,涉及到配位化学命名规则与无机化学传统命名的差异。 1. 在配位化合物中,OH⁻ 作为配体时的名称就是「羟基」 在配合物&#x…...
