首页 前端知识 最简单的大屏适配解决方案---autofit.js

最简单的大屏适配解决方案---autofit.js

2024-01-25 10:01:08 前端知识 前端哥 970 827 我要收藏

在工作开发当中,我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配,

下面为大家介绍最好用的大屏解决方案——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/#/

 最后谢谢大家,如果帮到你希望你帮我点赞,创作不易。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/264.html
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!