大屏可视化项目分辨率自适应.docx - Word

为大家介绍一个非常好用的大屏解决方案——autofit.js

可根据窗口大小进行自动适配。

官网地址:autofit.js | 最易用的自适应工具

下面是使用方法

1.npm下载

npm i autofit.js

2.在项目中引入

import autofit from 'autofit.js'

3.init()初始化,注意:要在mounted()里

mounted() {
    autofit.init({
      designHeight: 1080,//高度
      designWidth: 1920,//宽度
      // renderDom: '#app',
      resize: true
    })
  }

以上三步,大屏适配就已经完成了

以上使用的是默认参数,可根据实际情况调整,可选参数有

   * - el:渲染的dom,默认是 "#app",必须使用id选择器 
   * - dw:设计稿的宽度,默认是 1920 
   * - dh:设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080
   * - resize:是否监听resize事件,默认是 true
   * - ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md
   * - transition:过渡时间,默认是 0
   * - delay:默认是 0
第1页,共1页
本文共0个字符
中文(中国)
辅助功能
文档日期2024-09-21 14:54:32