在工作开发当中,我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配,
下面为大家介绍最好用的大屏解决方案——autofit.js。
“一行代码搞定,开袋即食!!!”
效果图展示,可根据窗口大小进行自动适配。
使用方法:
1.npm下载:
npm i autofit.js
2.项目中引入使用:
import autofit from 'autofit.js'
3.init()初始化加载:注意一定要在mounted里面使用,因为要在dom挂在完成生效!!!
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom:"#app",
resize: true
},false) // 可关闭控制台运行提示输出
},
以上使用的是默认参数,可根据实际情况调整,参数分别为
* - renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器 * - designWidth(可选):设计稿的宽度,默认是 1920 * - designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080 * - resize(可选):是否监听resize事件,默认是 true
其他详细细节配置可取npm官网查询:
autofit.js - npm
拓展知识:
如果大家想要设备视口的全屏大屏项目可使用:DataV框架
里面提供了很多可以快速开发大屏项目的api和标签
网址:介绍 | DataV
还有一个基于echarts二次封装的网站,里面的配置的可以直接粘贴使用,也推荐给大家,要注意echarts版本和是否含有第三方插件。
Made a Pie:https://madeapie.com/#/
最后谢谢大家,如果帮到你希望你帮我点赞,创作不易。