三步修復(fù) Layui Tabs 標(biāo)簽頁中表單渲染錯亂切換 Tab 后下拉框為什么錯位【免費下載鏈接】layui一套遵循瀏覽器原生態(tài)開發(fā)模式的 Web UI 組件庫。項目地址: https://gitcode.com/GitHub_Trending/la/layuiLayui 把表單Form放進標(biāo)簽頁Tabs后切到非首個標(biāo)簽常出現(xiàn)輸入框錯位、下拉框?qū)挾犬惓?、圖標(biāo)疊字。下面先復(fù)現(xiàn)、講清原因再給一套可照做的修復(fù)步驟改完附自查清單。先復(fù)現(xiàn)一下問題用當(dāng)前主干源碼3.xlay-前綴類名即可穩(wěn)定復(fù)現(xiàn)2.x 系列把類名換成layui-前綴現(xiàn)象相同頁面里放一組lay-tabs第二個標(biāo)簽里放一個lay-form含下拉框和帶lay-affix圖標(biāo)的輸入框頁面加載時調(diào)用form.render()此時第二個標(biāo)簽還是隱藏的點擊切到第二個標(biāo)簽看到的現(xiàn)象下拉面板寬度變成 0或?qū)挾葘Σ簧嫌|發(fā)輸入框輸入框右側(cè)的圖標(biāo)壓住文字間距為 0數(shù)字輸入框的加號/減號按鈕錯位為什么會這樣打個比方關(guān)著抽屜你在里面量家具量出來全是零——抽屜拉開后家具當(dāng)然對不上格子。機制很短非活動標(biāo)簽內(nèi)容被.lay-tabs-item { display: none }隱藏見 src/css/modules/tabs.css切換標(biāo)簽只是給內(nèi)容項加減lay-show類不會觸發(fā)任何組件重新渲染而 Form 渲染時要在注入時刻量取元素實際寬度下拉面板寬度取title.width()、輸入框圖標(biāo)要寫padding-rightdisplay: none的容器里寬度全是 0于是 padding、面板寬度都按 0 計算標(biāo)簽顯示后再展開下拉錯位就暴露出來了按步驟修復(fù)核心一句話尺寸類組件必須在可見狀態(tài)渲染切換后補渲染一次即可。第 1 步給每個標(biāo)簽頁的表單一個唯一的lay-filterdiv classlay-tabs iddemoTabs ul classlay-tabs-header li lay-idbase基本信息/li li lay-idadvance高級設(shè)置/li /ul div classlay-tabs-body div classlay-tabs-item form classlay-form lay-filterbaseForm!-- 輸入框、select --/form /div div classlay-tabs-item form classlay-form lay-filteradvanceForm!-- 輸入框、select --/form /div /div /divlay-filter是后面精準(zhǔn)重渲染的鑰匙別省。第 2 步監(jiān)聽切換事件切換完成后重渲染當(dāng)前標(biāo)簽里的表單?layui.use([tabs, form], function () { var tabs layui.tabs, form layui.form; tabs.render({ elem: #demoTabs }); // 實例 id 默認(rèn)取容器 id // 切換完成后執(zhí)行thisBodyItem 是當(dāng)前活動的內(nèi)容項 tabs.on(afterChange(demoTabs), function (data) { var filter data.thisBodyItem .find(form) .attr(lay-filter); // 當(dāng)前表單的 filter form.render(null, filter); // 只重渲染這一個表單 }); });第 3 步動態(tài)插入內(nèi)容的標(biāo)簽先顯示、后渲染如果某個標(biāo)簽的內(nèi)容是 AJAX 或模板插入的不要插完立刻 render——插入時它還是隱藏的寬度照樣是 0。在afterChange回調(diào)里內(nèi)容此時已可見再調(diào)form.render(null, filter)。備選做法一句話重表單可以懶加載記錄各標(biāo)簽是否初始化過首次切入時才注入 HTML 并渲染后續(xù)切換跳過。改完怎么驗證檢查項預(yù)期表現(xiàn)切到第二個標(biāo)簽輸入框與右側(cè)圖標(biāo)不再重疊間距正常展開 select面板寬度與觸發(fā)輸入框一致位置緊跟其下數(shù)字輸入框加/減按鈕對齊點擊可正常步進來回切換多次組件不重復(fù)、不疊加、不錯位表單提交/校驗錯誤提示落在對應(yīng)表單項上樣式正常常見問題Q每次切換都重渲染會不會事件綁重復(fù)、開銷很大不會。Form 的渲染是冪等的——源碼里每次渲染先hasRender.remove()移除舊的裝飾元素再重建見 src/components/form.js不會疊加節(jié)點和事件。且我們只渲染當(dāng)前標(biāo)簽?zāi)且粋€表單范圍很小。Q切換時直接全局form.render()行不行能跑但會掃描整頁所有表單頁面表單多時有可見卡頓還可能干擾其他實例。帶上lay-filter精準(zhǔn)渲染更穩(wěn)。Q第一個默認(rèn)激活的標(biāo)簽也要處理嗎不用。它加載時就是可見的初始form.render()量到的寬度是對的錯位的只是加載時被藏起來的那些標(biāo)簽。記住關(guān)鍵點隱藏容器里渲染量出來的尺寸就是 0讓表單在可見時渲染、切換后補渲染問題就消失了。組件實現(xiàn)可對照源碼src/components/tabs.js、src/components/form.js【免費下載鏈接】layui一套遵循瀏覽器原生態(tài)開發(fā)模式的 Web UI 組件庫。項目地址: https://gitcode.com/GitHub_Trending/la/layui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考