Vue 大屏适配方案2 锁定宽高比

创建一个外层包裹容器，，用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕

包裹容器完整代码：

<template><div id="container" ref="wrapper"><template v-if="show"><slot></slot></template></div>
</template><script>
export default {name: 'Layout',props: {options: Object   //object，包含大屏的宽度和高度，以保持宽高比    },data() {return {width:0, //传入的宽height:0, //传入的宽originalWidth:0, //视口宽度originalHeight:0,//视口高度dom:null,   //最外层DOM元素show: false}},mounted() {this.init();this.updateSize();this.updateScale();const self = this;window.addEventListener("resize", () =>{   //绑定的全局事件要在组件销毁时解除绑定self.init();// self.updateScale()});this.show = true},beforeDestroy() {const self = this;window.removeEventListener("resize", () => {self.init();});},methods:{init() {   //获取大屏真实宽高this.dom  = this.$refs["wrapper"];if(this.options && this.options.width && this.options.height){this.width = this.options.width;this.height = this.options.height;}else{this.width = this.dom.clientWidth;this.height = this.dom.clientHeight;}//获取屏幕的宽高this.originalWidth = window.screen.width;this.originalHeight = window.screen.height;// console.log(this.width, this.height, this.originalWidth, this.originalHeight);this.updateScale()},updateSize() {  //给外层容器设置宽高if(this.width && this.height) {this.dom.style.width = `${this.width}px`;this.dom.style.height = `${this.height}px`;}else{this.dom.style.width = `${this.originalWidth}px`this.dom.style.height = `${this.originalHeight}px`}},updateScale(){   //控制外层容器缩放const currentWidth = document.body.clientWidth;const currentHeight = document.body.clientHeight;const realWidth = this.width || this.originalWidth;const realHeight = this.height || this.originalHeight;const widthScale = currentWidth / realWidth;const heightScale = currentHeight / realHeight;this.dom.style.transform = `scale(${widthScale}, ${heightScale})`}}
}
</script><style lang="stylus">#containerposition fixedtop 0left 0overflow hiddenz-index 10transform-origin left top
</style>

传入设计稿宽高后，页面元素宽高根据设计稿大小去写就好，页面会自动缩放以适应屏幕

如何使用？
在我们的App.vue中：

<template><div id="app" style="background: #f6f7fb;"><layout :options="{width:3840，height:2160}"><router-view /></layout></div>
</template><script>
import Layout from "外层容器的路径"
export default {name: 'App'
}
</script>

Vue 大屏适配方案2 锁定宽高比相关推荐

Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言当接到可视化大屏需求时,你是否会有以下疑问
vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案
天下苦平台碎片化已久. 在移动互联网以前,开发者只需幸福的面对web.进入移动互联网时代,iOS.Android.H5以及各种小程序快应用层出不穷,开发者再也幸福不起来. 学习n个技术开发n个版本 ...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
前端大屏适配几种方案
记录一下前端大屏的几种适配方案. 我们是1920*1080的设计稿. 文章目录一.方案一:rem+font-size 1.查看适配情况 1.1 1920*1080情况下 1.2 3840*2160( ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
web端大屏适配解决方案
背景:近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况. 目的解决页面错乱问题,实现多种分辨率的大屏适配入坑分析俗话说的好,走过的最多路,就是网友们套路 ...
一文讲清大屏适配（大到四个屏幕也不怕）
前言政企项目少不了大屏适配的场景,如何打造完美的大屏适配解决方案呢? 解决方案大屏幕适配需要从以下几个方面入手,第一个是宽高.第二个是字体大小.第三个是三方库的设置. 1.针对宽高: 从最外层到最 ...
记公司项目中数字大屏适配4K大屏的问题
记公司项目中数字大屏适配4K大屏的问题在接手的时候,前端页面已经开发完成,div高度与宽度是百分比,所以适配问题不用考虑宽高问题,但字体边距等没有统一单位,要求适配4k屏首先4k屏的宽高是3840 ...

Vue 大屏适配方案2 锁定宽高比

Vue 大屏适配方案2 锁定宽高比相关推荐

最新文章

热门文章