vue2的scale方式适配大屏

代码

js 复制代码
mounted(){
    //初始化自适应  ----在刚显示的时候就开始适配一次
    handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => handleScreenAuto();
},
destroyed(){
    window.onresize = null;
},
methods: {
    //数据大屏自适应函数
    const handleScreenAuto = (): void => {
        const designDraftWidth = 1920;//设计稿的宽度
        const designDraftHeight = 960;//设计稿的高度
        //根据屏幕的变化适配的比例
        const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ?
            (document.documentElement.clientWidth / designDraftWidth) :
            (document.documentElement.clientHeight / designDraftHeight);
        //缩放比例
        (document.querySelector('#screen') as any).style.transform = `scale(${scale}) translate(-50%)`;
    }
}
html 复制代码
<template>
    <div className="screen-wrapper">
        <div className="screen" id="screen">

        </div>
    </div>
</template>
css 复制代码
    .screen-root {
    height: 100%;
    width: 100%;

    .screen {
        display: inline-block;
        width: 1920px;
    / / 设计稿的宽度 height: 960 px;
    / / 设计稿的高度 transform-origin: 0 0;
        position: absolute;
        left: 50%;
    }
}

将上述生命周期和methods中的代码复制,然后在id为screen的div中编写数据大屏即可。

缺点:

  • 内部组件如果用了鼠标坐标点这些,会有偏移的。比如 slider滑块这些依赖 clientX 这些的。
  • 如果大屏内存在地图组件的交互,存在点错位问题
相关推荐
GIS之路10 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴18 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥21 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记32 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js