Vue可视化大屏(驾驶舱)适配(等比缩放超简单)_vue 驾驶舱

说明

驾驶舱的适配方案很多，但目前找不到太多相关的文章，所以给大家分享一下平时用的最多的方案。因为原理非常简单，就只给个简单的vue的demo了，大家了解思路就行，这种方法所有框架都能用不限于vue。

实现方法

1.假设在根组件App.vue下的某个div内是驾驶舱的内容

<template>
  <div id="app">
    <div id="cokpitApp" class="cokpitApp">
    这里是驾驶舱的内容
    </div>
  </div>
</template>
1
2
3
4
5
6
7

2.在驾驶舱的父节点(App.vue)样式里宽高要铺满，设置相对位置并将子元素水平、垂直剧中。在驾驶舱所在的节点上写死宽高(根据UI比例设置，这里以1920*1080为例)，

<style lang="less">
#app {
  color: #2c3e50;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .cokpitApp {
    flex-shrink: 0;
    width: 1920px;
    height: 1080px;
    background-size: 100% 100%;
    color: #fff;
    overflow: hidden;
    position: relative;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.写一个adapter()方法，用于根据屏幕尺寸计算出驾驶舱页面长和宽将要缩放的倍数并适配。在页面挂载结束后执行一次该方法，并且绑定监听尺寸变化的事件，屏幕尺寸变化时再次执行adapter()方法重新计算并适配。

methods: {
     //适配-等比缩放
     adapter() {
      let screenWidth = window.innerWidth;		//获取屏幕宽度
      let screenHeighth = window.innerHeight;	//获取屏幕高度
      let cockpitDom = document.getElementById("cokpitApp");//获取驾驶舱节点
      let xmultiple = screenWidth / 1920;	//计算宽度缩放比例
      let ymultiple = screenHeighth / 1080; //计算高度缩放比例
      cockpitDom.style.transform = `scale(${xmultiple},${ymultiple})`;//缩放
    },
  },
  created() {},
  mounted() {
    this.adapter();		//挂载结束后默认执行
    window.addEventListener("resize", () => {	//页面尺寸变化后重新适配
      this.adapter();
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结束啦～是不是非常简单～设置完毕后，打开控制台调整调试的尺寸就会发现内容会等比放大或者缩小。但是这种适配并不会改变内容的尺寸，字体的font-size并不会根据屏幕尺寸变，是因为在最外层调整的缩放比例导致看到的字体变小了。

补充说明

1.这种方案不会出现尺寸变化后文字换行或者样式堆积到一块的情况，但这种等比缩放更适用于用户屏幕宽高比和UI宽高比差距不大的情况下。如果差距大了现实出来的内容会扁长或者窄高。
2.各位大佬用的时候不用像我这样在app.vue写个div当驾驶舱，我只是为了简便，让大家了解思路，所以大佬们用的时候该搭的架子还是要好好搭的[狗头]
2.适配方案很多，各有优劣，这里推荐一种我常用的，画一个1920*1080的页面后就可以兼容大部分屏幕了，供大家参考，有不对的地方欢迎各位大佬指正。