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

vue3 可视化大屏自适应屏幕组件

首先定义了一个名叫ScreenContainerOptions的组件,需要传的参数如下

export type ScreenContainerOptions = {width?: string | numberheight?: string | numberscreenFit?: boolean // 是否开启屏幕自适应,不然会按比例显示
}

组件的主要代码如下

onMounted(async () => {await initSize()updateSize()updateScale()window.addEventListener('resize', onResize)isReady.value = true // 执行完上面的方法后再渲染slot插槽
})// 初始化宽高
const initSize = () => {return new Promise((resolve) => {nextTick(() => {dom = refName.valueparentDom = refNameParent.value// 获取大屏的真实尺寸(不传值就是dom元素的宽高)widthRef.value = props.options?.width || dom.clientWidthheightRef.value = props.options?.height || dom.clientHeight// 获取屏幕尺寸,避免重复计算if (!screenWidthRef.value || !screenHeightRef.value) {screenWidthRef.value = window.screen.widthscreenHeightRef.value = window.screen.height}resolve(true)})})
}
// 更新宽高
const updateSize = () => {dom.style.width = `${widthRef.value || screenWidthRef.value}px`dom.style.height = `${heightRef.value || screenHeightRef.value}px`
}
// 更新缩放比例
const updateScale = () => {// window.innerWidth 获取当前展示区域的宽度const currentWidth = window.innerWidth// 获取大屏最终真实的宽度const realWidth = widthRef.value || screenWidthRef.value// 是否开启屏幕适配,不会按照比例const { screenFit } = props.options// 如果不想屏幕留白,而是自适应宽高的话let heightScale = 1// window.innerWidth 获取当前展示区域的宽度const currentHeight = window.innerHeight// 获取大屏最终真实的宽度const realHeight = heightRef.value || heightRef.valueif (screenFit) {heightScale = currentHeight / realHeight// if (parentDom) {//   parentDom.style.height = dom.style.height = `${window.innerHeight}px` // 父容器宽度设置为原屏幕的宽度// }}// 算出缩放比例并赋值// 只需要根据宽度计算即可const scale = currentWidth / realWidthdom && (dom.style.transform = `scale(${scale}, ${screenFit ? heightScale : 1})`) // 不开启screenFit的话高度不需要缩放if (parentDom) {parentDom.style.width = `${window.innerWidth}px` // 父容器宽度设置为原屏幕的宽度screenFit && (parentDom.style.height = `${window.innerHeight}px`) // 父容器宽度设置为原屏幕的宽度}
}// 浏览器resize事件触发回调
const onResize = async () => {await initSize()await nextTick()updateScale()
}

组件完整代码地址

https://github.com/jimchou-h/vue-study/blob/dev/src/components/ScreenContainer.vue

相关文章:

vue3 可视化大屏自适应屏幕组件

首先定义了一个名叫ScreenContainerOptions的组件,需要传的参数如下 export type ScreenContainerOptions {width?: string | numberheight?: string | numberscreenFit?: boolean // 是否开启屏幕自适应,不然会按比例显示 } 组件的主要代码如下 …...

SpringCloud入门概述

1. 介绍 Spring Cloud 1.1 什么是 Spring Cloud Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具集,它为开发者提供了一系列开箱即用的工具和库,用于构建分布式系统中的微服务架构。Spring Cloud 提供了诸如服务发现、配置中心、负载均衡、…...

刷题计划_冲绿名

现在 rating 是 1104 准备刷 100道 1200的题,把实力提升到 1200 ,上一个绿名 每一个分数段的题都写一百道,争取早日上蓝 现在 虽然 cf 里面显示写了一些这个分数段的题,但是自己训练的时候,其实是没有训练一道这个分…...

【微信小程序开发】小程序版的防抖节流应该怎么写

由于微信小程序与普通网页的开发、编译、运行机制都有所不同,在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的H5开发的防抖节流此处就不再分享了,网上有太多的教程,或者直接问那群AI即可。 OK,言归正传&…...

单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)

目录 蜂鸣器播放提示音 蜂鸣器播放音乐(天空之城) 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识,这一节开始代码演示! 蜂鸣器播放提示音 先创建工程:蜂鸣器播放提示音 把我们之前模块化的…...

软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能

软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能 一、前言 以下软件教程以 佳易王茶社计时计费管理系统软件V18.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 问:这个软…...

clang前端

Clang可以处理C、C和Objective-C源代码 Clang简介 Clang可能指三种不同的实体: 前端(在Clang库中实现)编译驱动程序(在clang命令和Clang驱动程序库中实现)实际的编译器(在clang-ccl命令中实现&#xff0…...

ARM:AI 的翅膀,还能飞多久?

ARM(ARM.O)于北京时间 2024 年 2 月 8 日上午的美股盘后发布了 2024 年第三财年报告(截止 2023 年 12 月),要点如下: 1、整体业绩:收入再创新高。ARM 在 2024 财年第三季度(即 23Q4…...

【C语言】常见字符串函数的功能与模拟实现

目录 1.strlen() 模拟实现strlen() 2.strcpy() 模拟实现strcpy() 3.strcat() 模拟实现strcat() 4.strcmp() 模拟实现strcmp() 5.strncpy() 模拟实现strncpy() 6.strncat() 模拟实现strncat() 7.strncmp() 模拟实现strncmp() 8.strstr() 模拟实现strstr() 9.str…...

pyGMT初步使用

文章目录 安装显示地图保存地图 安装 GMT,即Generic Mapping Tools,通用制图工具,是GIS领域应用最广泛的制图软件之一,用于绘制地图、图形以及进行地球科学数据分析和可视化。而pyGMT即其为python提供的函数接口,故而…...

神经网络 | CNN 与 RNN——深度学习主力军

Hi,大家好,我是半亩花海。本文主要将卷积神经网络(CNN)和循环神经网络(RNN)这两个深度学习主力军进行对比。我们知道,从应用方面上来看,CNN 用于图像识别较多,而 RNN 用于…...

thinkphp6入门(20)-- 如何上传图片、文件

1. 配置文件 设置上传的路径 对应文件夹 2. 前端 <div class"card-body"><h1 class"card-title">用户头像</h1><img src"../../../uploads/{$user.avatar_photo_path}" alt"avatar" height"100"/&g…...

【Linux技术宝典】深入理解Linux基本指令:命令行新手指南

&#x1f4f7; 江池俊&#xff1a; 个人主页 &#x1f525;个人专栏&#xff1a; ✅数据结构冒险记 ✅Linux技术宝典 &#x1f305; 有航道的人&#xff0c;再渺小也不会迷途。 文章目录 一、Linux下基本指令1. ls 指令2. pwd指令3. clear指令4. cd指令什么是家目录&#xf…...

C++:Level1阶段测试

总结。 只要你看过我的文章&#xff0c;哪怕只是一半&#xff0c;一定能够过关&#xff01; 准备好开始测试氻吗&#xff1f; 选择题&#xff0c;每题4分&#xff0c;共40分 1、 DevC的项目创建按钮是_____ A、文件[F]” → “新建[N]” → “项目[P]... B、工具[T]” → …...

autojs自动化刷视频脚本

视频展示 视频 //悬浮窗 // var window floaty.rawWindow( // <frame gravity"center" bg"#ff00ff"> // <button id"action" w"300dp" h"300dp"> // 按钮 // </button> // </fram…...

鲁南制药“健康幸福中国年”主题航班,开启探寻健康与幸福的旅程

“小年&#xff0c;小年&#xff0c;过了今天就是年。”提到过年&#xff0c;北方人的“过年”是从腊月二十三的“小年”开始的&#xff0c;而南方地区是在明天。虽然时间不同&#xff0c;但是浓浓的年味是一样的&#xff0c;红彤彤是主色调&#xff0c;喜洋洋是主乐曲&#xf…...

CISA知识点

审计流程21%&#xff1b;运营和业务恢复23%&#xff1b;保护资产27%&#xff1b;IT治理17%&#xff1b;开发12%。 领域1-信息系统审计流程 规划-现场工作-报告 &#xff08;1&#xff09;审计规划 了解业务使命、目标、目的和流程 找到相关规定 实施风险分析&#xff08;…...

C语言求解猴子分桃子

问题&#xff1a;海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只 猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了 一个&#xff0c;它同样把多的…...

本地部署 Stable Cascade

本地部署 Stable Cascade 0. 引言1. 事前准备2. 本地部署 Stable Cascade3. 使用 Stable Cascade 生成图片4. Stable Cascade Github 地址 0. 引言 Stable Cascade 模型建立在 Wrstchen 架构之上&#xff0c;它与 Stable Diffusion 等其他模型的主要区别在于它的工作潜在空间要…...

LeetCode 二叉树/n叉树的解题思路

二叉树 二叉树特点是每个节点最多只能有两棵子树&#xff0c;且有左右之分二叉树的数据结构如下&#xff1a; public class TreeNode {//节点的值int val;//左子树TreeNode left;//右子树TreeNode right;TreeNode(int x) { val x; } }树节点的初始化&#xff1a; int val1;T…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...