在工作開發(fā)當(dāng)中，我們避免不了要去做大屏。那么做大屏其實(shí)最難的點(diǎn)和最核心的問題就是適配，
下面為大家介紹最好用的大屏解決方案——autofit.js。
“一行代碼搞定，開袋即食?。?！”
效果圖展示，可根據(jù)窗口大小進(jìn)行自動(dòng)適配。
使用方法：
1.npm下載：
npm i autofit.js2.項(xiàng)目中引入使用：
import autofit from 'autofit.js'3.init(）初始化加載：注意一定要在mounted里面使用，因?yàn)橐赿om掛在完成生效?。?！
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom:"#app",
resize: true
},false) // 可關(guān)閉控制臺(tái)運(yùn)行提示輸出
},以上使用的是默認(rèn)參數(shù)，可根據(jù)實(shí)際情況調(diào)整，參數(shù)分別為
* - renderDom（可選）：渲染的dom，默認(rèn)是 "#app"，必須使用id選擇器 * - designWidth（可選）：設(shè)計(jì)稿的寬度，默認(rèn)是 1920 * - designHeight（可選）：設(shè)計(jì)稿的高度，默認(rèn)是 929 ，如果項(xiàng)目以全屏展示，則可以設(shè)置為1080 * - resize（可選）：是否監(jiān)聽resize事件，默認(rèn)是 true
其他詳細(xì)細(xì)節(jié)配置可取npm官網(wǎng)查詢：
autofit.js - npm
拓展知識(shí)：
如果大家想要設(shè)備視口的全屏大屏項(xiàng)目可使用：DataV框架
里面提供了很多可以快速開發(fā)大屏項(xiàng)目的api和標(biāo)簽
網(wǎng)址：介紹 | DataV
還有一個(gè)基于echarts二次封裝的網(wǎng)站，里面的配置的可以直接粘貼使用，也推薦給大家，要注意echarts版本和是否含有第三方插件。
Made a Pie:https://madeapie.com/#/
文章來源：http://www.zghlxwxcb.cn/news/detail-714661.html
?最后謝謝大家，如果幫到你希望你幫我點(diǎn)贊，創(chuàng)作不易。文章來源地址http://www.zghlxwxcb.cn/news/detail-714661.html
到了這里，關(guān)于最簡單的大屏適配解決方案---autofit.js的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
