这是我参与11月更文挑战的第N天,活动详情查看:2021最后一次更文挑战
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种:
遇到的这样的项目,大多是同学想到的是用echarts或chart.js,再搭配各种mvvm框架(vue),找二次封装过的组件,然后开始埋头开始写了,写着写着你会发现,如何适配不同屏幕呢?css媒体查询吧,用vw吧,哪个好点呢。其实写到最后,我觉得都不好对于这种拿不定主意的情况呢,最好还是参考大厂的做法,于是去找了网易有数,百度suger等,仔细观察他们都采用了css3的缩放transform: scale(X)
属性,看到这是不是有种豁然开朗的感觉
于是我们只要监听浏览器的窗口大小,然后控制变化的比例就好了,他们是如何写这样的页面的:
在components目录下创建ScaleBox.vue文件
<template>
<div
class="ScaleBox"
ref="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: "ScaleBox",
props: {
},
data() {
return {
scale: "",
width:1920,
height:937
};
},
mounted() {
this.setScale();
window.addEventListener("resize", this.debounce(this.setScale, 100));
},
methods: {
getScale() {
let { width, height } = this;
let wh = window.innerHeight / height;
let ww = window.innerWidth / width;
console.log(ww < wh ? ww : wh);
return ww < wh ? ww : wh;
},
setScale() {
if(window.innerHeight ==1080){
this.height = 1080
}else{
this.height = 937
}
this.scale = this.getScale();
if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
}
},
debounce(fn, delay) {
let delays = delay || 500;
let timer;
return function () {
let th = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delays);
};
},
},
};
</script>
<style lang="scss">
#ScaleBox {
--scale: 1;
}
.ScaleBox {
position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: 0 0;
left: 50%;
top: 50%;
transition: 0.3s;
z-index: 999;
}
</style>
页面引用,把大屏首页布局放入ScaleBox组件内,就可以愉快的运用px或%布局了
import ScaleBox from '@/components/ScaleBox.vue'
<ScaleBox >内容</ScaleBox >
只要把页面放在这个组件中,就能实现跟大厂们类似的效果。这种方式下不管屏幕有多大,分辨率有多高,只要屏幕的比例跟你定的比例一致,都能呈现出完美效果。而且开发过程中,样式的单位也可以直接用px,省去了转换的烦恼~~~