实现可视化大屏的适配,并且解决缩放导致的事件偏移问题

news/2024/11/25 12:47:07/

项目上有一个大屏是根据UI的设计稿,已经将宽高固定了,现在要求做适配,这里推荐两款用过的适配插件。

1、v-scale-screen

组件库地址:https://www.npmjs.com/package/v-scale-screen?activeTab=readme

v-scale-screen这个插件利用缩放进行适配,使用起来也非常的简单方便,可支持页面铺满和等比例缩放。

目前有vue2和vue3版本,对应的下载命令如下

//vue2
npm install v-scale-screen@1.0.0//vue3
npm install v-scale-screen@2.0.0

我这里是vue2版本,所以直接在main.js中引入,注册;然后在需要适配的页面外层套vscalescreen组件,传入宽高即可实现适配,这个插件有一个缺陷,就是如果大屏上有地图,并且地图上有一些点击交互事件,由于缩放的原因,会导致事件偏移。

javascript">import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
<template><v-scale-screen width="1920" height="1080" fullScreen><div class="screen"></div></v-scale-screen>
</template>

2、autofit.js

autofit.js也是一款可以实现自适应的库,更确切来说它是一个封装的很好的工具方法。为什么会选择这个,因为在我的大屏上有地图,地图上有图标并且有点击事件,大屏自适应后会导致事件偏移;而这个方法可以选择哪些dom进行缩放,哪些可以不缩放。

组件地址:https://github.com/Auto-Plugin/autofit.js

文档地址:https://auto-plugin.github.io/index/autofit.js/

这个组件用法非常简单

下载

javascript">npm i autofit.js

导入

javascript">import autofit from 'autofit.js'

使用

javascript"> mounted() {autofit.init({dh: 1080,dw: 1920,el:"#app",resize: true,ignore: [{el: "#map_container",//地图容器id// height: window.innerHeight + 'px',//可选,需注明单位// width: window.innerWidth +'px'//可选,需注明单位}]})},

这个工具方法引进来之后,一定要在挂载之后执行,传入对应宽高和dom的id,ignore的作用是忽略缩放的元素(该元素将反向缩放),因为大屏里面有地图,把地图组件的id传进去,就不会让地图进行缩放,最后的事件也不会偏移,点击事件能够正常触发。


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

相关文章

K8s 下通过prometheus监控 nginx

k8s 下有两个版本的nginx ingress 分别是 ingress nginx 以及 nginx ingress Ingress-nginx 与 Nginx-ingress - LeoZhanggg - 博客园 这里我讨论的是 nginx ingress Nginx Ingress 使用Prometheus 导出数据 nginx ingress 本身支持通过支持这个提供prometheus 格式的…

【轻量级 Java Web 整合开发(第 2 版)-框架编程技术】-期末复习(第二版)

第一章 Java Web 技术概述 作业 1、完成课后(P28)选择题和问答题&#xff08;只需完成&#xff0c;不需要提交&#xff09; 2、Tomcat的目录结构及其用途&#xff1f; bin:启动/关闭应用服务器的bat批处理命令&#xff1b; conf:包含不同的配置文件。包括server.xml&#xff…

ubuntu24.04下Matlab安装踩坑记录

1. 版本选择 link&#xff1a;https://ww2.mathworks.cn/downloads/matlab2024/2022x按官网执行后&#xff0c;均会出现暂时无法解决的bug&#xff1b;想到以前科大的虚拟机平台的版本是2019b&#xff0c;沿用这个版本即可&#xff1b;(其实很多软件根本没必要更新&#xff0c…

(免费送源码)计算机毕业设计原创定制:Java+B/S+SSM+Web前端开发技术+IDEA+MySQL+Navicat 有风小院

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对有风小院等问题&#xff0c;对有风小院信息…

开源 AI 智能名片 2+1 链动模式商城小程序:场景驱动的商业创新与用户价值挖掘

摘要&#xff1a;本文围绕开源 AI 智能名片 21 链动模式商城小程序源码&#xff0c;深入分析了场景中的时间、空间、设备、社交和状态五大核心元素。阐述了各元素的表现形式、应用策略及价值&#xff0c;包括时间元素对业务周期和用户行为的影响及相应营销策略&#xff1b;空间…

transform学习

知识点讲解&#xff1a; scale 是 CSS 的 transform 属性的一部分&#xff0c;用于对元素进行比例缩放。 transform: scale(sx); transform: scale(sx, sy); /* sx&#xff1a;表示元素在 水平轴&#xff08;X轴&#xff09;的缩放比例。 sy&#xff08;可选&#xff09;&a…

可编程序控制器组态

可编程序控制器组态是指对PLC&#xff08;Programmable Logic Controller&#xff09;进行配置和设置&#xff0c;以实现特定的控制逻辑和功能。它是PLC应用的关键步骤之一&#xff0c;决定了PLC如何运行和响应各种输入输出。以下是关于可编程序控制器组态的详细解释&#xff1…

接口性能优化的技巧

一. 索引 索引优化的成本是最小的&#xff0c;可以通过线上日志或者监控报告&#xff0c;查到某个接口用到的某条sql语句的耗时。 1.1 没加索引 sql语句中where条件的关键字段&#xff0c;或者order by后面的排序字段&#xff0c;忘了加索引。 1.2 索引没生效 可以通过exp…