vue開發元件時踩過的一些坑

2021-08-20 10:29:10 字數 917 閱讀 7424

近期又完成乙個vue專案,公司好像十分看好vue框架,之後的幾個專案也準備使用vue框架。然而回想起之前,使用vue開發元件時遇到的各種bug,心中一陣後怕。在此記錄下那些填坑的歷程,方便以後查閱。

input輸入出現白屏問題

專案要求header部分固定,main部分可以滾動,css3實現main的css:

.main
聚焦時,鍵盤彈起,螢幕滾動,因此出現白屏。

只需在main的樣式中加上:transform: scale(0);

推薦一篇transform對position影響的部落格,css3 transform對普通元素的n多渲染影響

scroller元件出現白屏問題

專案中使用了better-scroll實現乙個上拉載入更多和下拉重新整理的元件,測試發現部分手機,無法顯示列表。具體原因目前不清楚,但是估計是better-scroll使用了transform的鍋。一開始以為是部分手機不支援calc計算,因此在元件的計算屬性裡計算出螢幕高度,然並卵。可是,將計算的高度發在vue鉤子函式mounted中,竟然起作用了,太神奇了

input[type=file]上傳 問題

開發上傳元件時,input[type=file]會呼叫原生相簿或者相機,由於安卓和ios對系統的保護,遮蔽了input[type=file]的功能,這個需要原生**實現

json資料量很大(約1.5m),卡屏問題

開發tree元件時,正常情況使用v-show來控制tree的摺疊和展開,由於資料量很大,出現卡屏問題。網上搜尋了一下,v-if在這種情況會比v-show效能更好。

使用v-if出現當摺疊起來的元素被選中時,其子元素沒被選中。這時需要運算元據源,將其設定為選中狀態。

安裝ubuntu server 踩過的一些坑記錄

環境介紹 有獨立顯示卡 有裝 win10 系統 順序不代表執行時的順序 遇到的第乙個問題 我把顯示器的 vga 插到了 主機板的核顯上,導致畫面無法顯示 怎麼解決的 因為有裝獨立顯示卡,所以自然是裝到獨立顯示卡上咯 遇到的第二個問題 u盤裡面的 ubuntu server 怎麼裝啊?怎麼解決的 需要...

Vue踩過的坑

vue檔案縮排問題,嚴格縮排,如果需要四個字元的縮排請修改為,當然造成這個的結果是,建立檔案的時候 use eslint to lint your code?這句話就是告訴你是不是要給你管理 縮排,選擇no就完事了,啥事沒有 下面是.eslintrc.js的 如果你選擇了yes的話就修改下面這段 吧...

vue專案開發中踩過的坑

一 路由 這兩天移動端的同事在研究vue,跟我說看著我的專案做的,子路由訪問的時候是空白的,我第一反應是,不會模組沒載入進來吧,還是。此處省略一千字。廢話不多說上 路由 redirect ordermanger children element的選單元件 問題描述 1 根據以上 訪問list路由時訪...