【vue2可视化开发】新手会遇到的问题——大屏自适应(vue可视化面板怎么打开)

【vue2可视化开发】新手会遇到的问题——大屏自适应 简要描述

推荐整理分享【vue2可视化开发】新手会遇到的问题——大屏自适应(vue可视化面板怎么打开)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue cli可视化,vue组件可视化 开源,vue可视化创建项目,vue 可视化布局工具,vue 可视化开发,vue可视化开发工具,vue 可视化开发,vue可视化面板怎么打开,内容如对您有帮助，希望把文章链接给更多的朋友！

开发可视化大屏第一步，必须要考虑适配不同屏幕的问题，在网络上查看资料，总结了一个目前最适合可视化开发的自适应方案——v-scale-screen组件

1. 安装

注：vue2使用v-scale-screen@1.0.0版本，vue3使用v-scale-screen@2.0.0版本

npm install v-scale-screen@1.0.0 --save2. 在main.js中引用import VScaleScreen from 'v-scale-screen'Vue.use(VScaleScreen)3. 在vue组件中使用<template><v-scale-screen width="1920" height="1090" :fullScreen="false"><div>...</div><div>...</div><div>...</div></v-scale-screen></template>

v-scale-screen会将页面等比缩放，在最外层使用，包裹整个组件，width与height设置ui图大小，在v-scale-screen中可以直接使用px，不会导致位置偏移或改变图表大小等。

:fullScreen是否铺满屏幕，默认为false，设置为true即铺满全屏，会导致相应页面效果拉伸，通常不建议使用。

实际运用会遇到的问题：

我在开发时遇到了这样的问题，缩小屏幕后，页面内容及echarts内容会偏移，导致图表等位置靠左偏移，后发现布局时将三块总体布局宽度设置为百分比，如下图 解决方法：将百分比转换成对应的换算后的px单位，解决了内容偏移问题

将自己大屏自适应经验分享给大家，也做一下经验记录，如果大家有更好的解决方案，欢迎大家分享~