ElementUIselect組件引發的思路比較

NO IMAGE

需求

限制輸入搜索的字數到 50

現狀

使用了 ElementUI 的 select 組件,可輸入搜索模式,輸入內容後觸發遠程請求,展示在下拉列表中,該組件根據 talk 條數,每條talk裡面都有一個這個 select 組件,input 的 原生事件都被包裹沒有暴露出來

實現

普通思路:

在當前form組件 mounted時,在nextTick中判斷是否存在talk,如果存在,則根據條數循環地找到每條下面的 input 元素,為之 setAttribute(‘maxlength’, ’50’)

這樣做的問題是,需要做計算,判斷,循環,浪費性能,代碼冗餘

大神思路:在focus事件時處理

既然能focus,說明此時talk肯定已存在,input元素也已經存在了,此處節省判斷和循環
在focus時給 e.target.setAttribute('maxlength', '50'), e.target 取得的是 DOM 元素,可以直接 setAttribute()
只在 focus 時觸發,節約性能

相關文章

SimpleDesign

English站會常用語

什麼是endpoint

Vue爛筆頭