Vue大屏自适应终极解决方案

v-scale-screen
v-scale-screen是一个大屏自适应组件,在实际业务中,我们常用图表来做数据统计,数据展示,数据可视化等比较直观的方式来达到一目了然的数据查看,但在大屏开发过程中,常会因为适配不同屏幕而感到困扰,下面我们使用v-scale-screen来解决一下这个难题。

效果

废话不多说,先上图

可以看到,我们通过等比例缩放的方式,实现了自适应,同时我们也为此发布了vue组件v-scale-screen

组件

v-scale-screen使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果,同时我们也支持铺满全屏,宽度等比,高度等比,等自适应方案

使用

  1. 安装依赖

注:vue2请使用v-scale-screen@1.0.0版本,vue3请使用v-scale-screen@2.0.0版本

复制代码
npm install v-scale-screen -save
# or
yarn add v-scale-screen
  1. 在main.js中引入

vue2中使用插件导入,vue3以组件导入

vue2

复制代码
// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

vue3

复制代码
<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {
  components:{
    VScaleScreen
  }
}
</script>
  1. 在组件中使用

    <v-scale-screen width="1920" height="1080">
    <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart>
    </v-scale-screen>
相关推荐
B站_计算机毕业设计之家14 小时前
计算机毕业设计:Python农业数据可视化分析系统 气象数据 农业生产 粮食数据 播种数据 爬虫 Django框架 天气数据 降水量(源码+文档)✅
大数据·爬虫·python·机器学习·信息可视化·课程设计·农业
hqyjzsb15 小时前
2025年市场岗位能力重构与跨领域转型路径分析
c语言·人工智能·信息可视化·重构·媒体·改行学it·caie
jarreyer21 小时前
常见分析方法与对应图表汇总
python·信息可视化·数据分析
Hy行者勇哥1 天前
文本描述驱动的可视化工具在IDE中的应用与实践
信息可视化
麦麦大数据1 天前
F029 vue游戏推荐大数据可视化系统vue+flask+mysql|steam游戏平台可视化
vue.js·游戏·信息可视化·flask·推荐算法·游戏推荐
jz_ddk2 天前
[LVGL] 从0开始,学LVGL:进阶应用与项目实战(上)
linux·信息可视化·嵌入式·gui·lvgl·界面设计
CodeJourney.2 天前
SQL提数与数据分析指南
数据库·信息可视化·数据分析
聊聊MES那点事2 天前
电脑零配件行业MES系统:快速实现全过程信息溯源
信息可视化·数据分析·数据可视化·mes
小白学大数据2 天前
Python爬虫数据可视化:深度分析贝壳成交价格趋势与分布
爬虫·python·信息可视化
我要学习别拦我~3 天前
柱状图的高级玩法:分组、堆叠、百分比对比
经验分享·信息可视化·数据可视化