实现可视化大屏的适配，并且解决缩放导致的事件偏移问题

项目上有一个大屏是根据UI的设计稿，已经将宽高固定了，现在要求做适配，这里推荐两款用过的适配插件。

1、v-scale-screen

组件库地址：https://www.npmjs.com/package/v-scale-screen?activeTab=readme

v-scale-screen这个插件利用缩放进行适配，使用起来也非常的简单方便，可支持页面铺满和等比例缩放。

目前有vue2和vue3版本，对应的下载命令如下

//vue2
npm install v-scale-screen@1.0.0

//vue3
npm install v-scale-screen@2.0.0

我这里是vue2版本，所以直接在main.js中引入，注册；然后在需要适配的页面外层套vscalescreen组件，传入宽高即可实现适配，这个插件有一个缺陷，就是如果大屏上有地图，并且地图上有一些点击交互事件，由于缩放的原因，会导致事件偏移。

import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

<template>
    <v-scale-screen width="1920" height="1080" fullScreen>
      <div class="screen">
      </div>
    </v-scale-screen>
</template>

2、autofit.js

autofit.js也是一款可以实现自适应的库，更确切来说它是一个封装的很好的工具方法。为什么会选择这个，因为在我的大屏上有地图，地图上有图标并且有点击事件，大屏自适应后会导致事件偏移；而这个方法可以选择哪些dom进行缩放，哪些可以不缩放。

组件地址：https://github.com/Auto-Plugin/autofit.js

文档地址：https://auto-plugin.github.io/index/autofit.js/

这个组件用法非常简单

下载

npm i autofit.js

导入

import autofit from 'autofit.js'

使用

 mounted() {
        autofit.init({
            dh: 1080,
            dw: 1920,
            el:"#app",
            resize: true,
            ignore: [
                {
                    el: "#map_container",//地图容器id
                    // height: window.innerHeight + 'px',//可选，需注明单位
                    // width: window.innerWidth +'px'//可选，需注明单位
                }
            ]
        })
    },

这个工具方法引进来之后，一定要在挂载之后执行，传入对应宽高和dom的id，ignore的作用是忽略缩放的元素（该元素将反向缩放），因为大屏里面有地图，把地图组件的id传进去，就不会让地图进行缩放，最后的事件也不会偏移，点击事件能够正常触发。