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

news/2024/2/27 20:48:20

首先定义了一个名叫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


http://www.ppmy.cn/news/1350316.html

相关文章

1. pick gtk dll 程序的制作

文章目录 前言预览细节要点初始窗口尺寸提示音快速提示信息对话框AlertDialog鼠标移入移出事件布局与父子控件关系图片 后续源码及资源 前言 在之前的打包测试中我提到了需要一个挑选dll的程序于是我打算用Gtk来制作这个程序 预览 细节要点 初始窗口尺寸 只有主窗口有set_d…

postgresql 手动清理wal日志的101个坑

新年的第一天,总结下去年遇到的关于WAL日志清理的101个坑,以及如何相对安全地进行清理。前面是关于WAL日志堆积的原因分析,清理相关可以直接看第三部分。 首先说明,手动清理wal日志是一个高风险的操作,尤其对于带主从的…

python -m SimpleHTTPServer mac报错

错误内容: Traceback (most recent call last):File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/runpy.py", line 174, in _run_module_as_main"__main__", fname, loader, pkg_name)File "/System/Libra…

c#内置委托

C#语言中有许多内置的委托&#xff0c;其中一些是常用的&#xff0c;包括&#xff1a; Action&#xff1a;表示不带返回值的方法的委托。它可以接受多个参数&#xff0c;但不返回任何值。 Action<int, string> actionDelegate (x, y) > Console.WriteLine("Ac…

在spring中操作Redis

目录 创建项目 ​编辑 配置Redis 创建类 StringRedisTemplate set / get list set Hash zset 新年快乐&#xff01;&#xff01;&#xff01;&#xff01; 创建项目 选中maven项目&#xff0c;然后选择java8&#xff0c;输入名称之后&#xff0c;点击next。 随后选择…

大数据的基础探索之大数据时代

前言&#xff1a;大数据已经是大势所趋&#xff0c;在这个网络时代能够不断地整合资源的人本身也是一种能力拥有者&#xff0c;在这个时代&#xff0c;如果一个人可以掌握数据分析工具&#xff0c;利用好云计算的能力&#xff0c;对于自己的个人而言来说都是一个极其重要的参与…

Day45- 动态规划part13

一、最长递增子序列 题目一&#xff1a;300. 最长递增子序列​​​​​​​ ​​​​​​​300. 最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数…

【微信小程序】微信小程序开发:从入门到精通

微信小程序开发&#xff1a;从入门到精通 一、开发准备二、小程序开发流程1、注册与创建项目2、开发页面3、配置4、调试与预览5、发布与审核 随着移动互联网的普及&#xff0c;微信小程序成为了越来越多企业和个人开发者的首选。小程序是一种无需下载安装即可使用的应用&#x…

MATLAB实现随机森林回归算法

随机森林回归是一种基于集成学习的机器学习算法&#xff0c;它通过组合多个决策树来进行回归任务。随机森林的基本思想是通过构建多个决策树&#xff0c;并将它们的预测结果进行平均或投票来提高模型的准确性和鲁棒性。 以下是随机森林回归的主要特点和步骤&#xff1a; 决策树…

Oracle中怎么设置时区和系统时间

在Oracle数据库中&#xff0c;设置时区和系统时间可以通过多种方法实现。下面是一些常见的方法&#xff1a; 1. 设置数据库的时区 Oracle数据库允许你为每个会话或整个数据库设置时区。 a. 为整个数据库设置时区 你可以使用ALTER DATABASE语句为整个数据库设置时区。例如&a…

JVM相关-JVM模型、垃圾回收、JVM调优

一、JVM模型 JVM内部体型划分 JVM的内部体系结构分为三部分&#xff0c;分别是&#xff1a;类加载器&#xff08;ClassLoader&#xff09;子系统、运行时数据区&#xff08;内存&#xff09;和执行引擎 1、类加载器 概念 每个JVM都有一个类加载器子系统&#xff08;class l…

【手写数据库toadb】数据字典的内容结构,它的生成,避免鸡生蛋蛋生鸡的问题,高频访下的性能应对

411 数据字典的作用 ​专栏内容: 手写数据库toadb 本专栏主要介绍如何从零开发,开发的步骤,以及开发过程中的涉及的原理,遇到的问题等,让大家能跟上并且可以一起开发,让每个需要的人成为参与者。 本专栏会定期更新,对应的代码也会定期更新,每个阶段的代码会打上tag,方…

Centos 7系统安装proftpd-1.3.8过程

一、下载安装&#xff1a; 1、网站中能够下载到profptd源码&#xff1a; http://www.proftpd.org/ 这个是软件源码ftp地址&#xff1a; ftp://ftp.proftpd.org/distrib/source/ 2、进入目录/root/download解压&#xff1a; tar -zxvf proftpd-1.3.8.tar.gz #将源码压缩包解压…

【小沐学GIS】基于WebGL绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐学GIS】…

自动驾驶轨迹规划之kinodynamic planning

欢迎大家关注我的B站&#xff1a; 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 本文PPT来自深蓝学院《移动机器人的运动规划》 目录 1.kinodynamic的背景 2. old-school pipline 3.example 1.kinodynamic的背景 kinodynami…

状态模式:灵活管理对象状态的设计策略

状态模式&#xff1a;灵活管理对象状态的设计策略 在软件开发的过程中&#xff0c;我们经常会遇到对象根据其内部状态的改变而改变其行为的场景。传统的处理方式可能会使用大量的条件判断语句来处理不同的状态转换以及相应的行为&#xff0c;这不仅使得代码难以维护&#xff0…

常见的物联网操作系统介绍

物联网&#xff08;Internet of Things&#xff0c;IoT&#xff09;是指将各种物理设备、车辆、家用电器、工业设备等通过网络连接起来&#xff0c;实现数据交换和通信的技术。物联网操作系统是管理这些设备并使其能够相互通信的软件平台。以下是一些常见的物联网操作系统&…

刘知远LLM——神经网络基础

文章目录 神经网络基础基本构成如何训练&#xff1f; Word2Vec例子负采样&#xff1a; 循环神经网络 RNN门控计算单元 GRU长短时记忆网络 LSTM遗忘门输入门输出门双向RNN卷积神经网络 CNNpytorch实战 神经网络基础 基本构成 全称&#xff1a;人工神经网络。启发于生物神经细胞…

一周学会Django5 Python Web开发-Django5操作命令

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计11条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

力扣题目训练(8)

2024年2月1日力扣题目训练 2024年2月1日力扣题目训练404. 左叶子之和405. 数字转换为十六进制数409. 最长回文串116. 填充每个节点的下一个右侧节点指针120. 三角形最小路径和60. 排列序列 2024年2月1日力扣题目训练 2024年2月1日第八天编程训练&#xff0c;今天主要是进行一些…
最新文章