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

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...