微信端 vue 批量處理開發

立刻又要作下一個功能了，因此趕忙抓緊時間總結一下（沒有代碼，不敢發） 技術棧vue全家桶+element+less；給一個列表頁添加批量處理功能，附帶的功能就是全選，篩選，滑動彈窗。微信端仍用element沒有用mint，因此相似popup的功能須要本身開發。開發時間一週。 1、popup組件開發 主要用於篩選功能相似手淘的篩選（右彈窗），業務信息的填寫（下彈窗） 參照mint源碼開發，有如下幾個難點： 1.popup組件分爲彈出層（pop）和遮蓋層（mask）兩部分，彈出層滑動效果用transition來作。因此須要用兩個transition來分別控制mask的opacity和pop的transform效果。會出現這兩個效果不一樣步的狀況，源碼是把mask單獨拿出來，用JS控制的mask的效果以及z-index的層級關係，再minx混合進來。這裏個人作法沒有那麼複雜，把mask層寫在pop層上面就好用了（緣由不明）。 2.關閉彈窗，兩個渠道：一是點擊mask上，二是點擊pop裏面的×。先將一下個人三個開發階段。 方案1： 每次回調父組件關閉方法，弊端：每一個頁面都須要手寫一個關閉方法，不符合組件思想 方案2： 修改父組件彈出框的標識符，弊端：每一個頁面的標識符名稱要求同樣，很容易出錯，不符合組件思想 方案3： this.$emit('input', val)。這個方法能夠修改組件的v-model值，從而實現雙向綁定，子組件修改父組件的標示位（好比點擊按鈕，滑塊組件出現，那麼就是把組件的v-model變爲true）。 參考這個 3.彈出層出現後底層不能滑動或者滾動。mint源碼寫的有些複雜，這裏我找到一個比較好用方法：mask層綁定@touchmove.prevent，簡單暴力。 4.pop裏面的內容在電腦測試能滾動，卻不能滑動（和@touchmove.prevent沒有關係實測）。很詭異的一個bug，解決方法給pop層綁定v-touch:pan，這個方法雖然滾動裏可是有瑕疵，滾動的比較快，但仍是能夠接受（pop層的設置ref="popContent"） 5.當下方彈出層高度較小的時候，蘋果的鍵盤彈出會把彈出框擋住（安卓不會），解決方法是檢測屏幕大小的變化，彈出鍵盤會觸發window.resize()方法，[參考這 ]http://blog.csdn.net/qq_25386583/article/details/77161478) 6.頁面其餘fixed定位和position定位且有背景色且有z-index值的單位會對彈出層有影響。緣由是transform和opacity會致使z-index失效。也沒找到很好的方法，彈出的時候將那些單位的z-index值置爲0，之後慢慢優化吧，這裏作的很差也是這個組件的關鍵。層級關係仍是作的很差。這個點參考這個 7.一些樣式問題。右彈窗的高度不能寫100%，要寫100vh；樣式很費時間的，可是沒什麼可總結的。。。 2、全選組件 element的Checkbox組件能夠直接拿過來用，如下開發遇到的問題： 1.checkbox組的是否選中是靠label屬性控制的，因此這裏要經過樣式把label隱藏。 2.當列表中列超過50後，全選會有較明顯的延遲，這裏在全選方法裏寫了一個假的loading，按條數計算loading的時間，也算沒有辦法的辦法。 3.在下彈窗填寫這一條的業務信息後，自動選中這一條，這個功能未實現。 4.一些樣式問題 3、篩選功能 1.最開始篩選用的el-dropdown組件，可是在移動端有bug：下拉的內容點擊後，下拉收回又下拉出來，二次點擊後消失。最後用的select代替，可是樣式上有一些bug，但能夠接受。 2.選過的條件顯示成標籤，有快捷篩選一欄，共三個標籤，爲歷史記錄，經常使用的篩選條件。經過vuex寫在用戶裏面。這裏介紹一個ES6數組去重的方法（數組爲數字不爲對象）Array.from(new Set(arr))，參考這個 這個功能開發是本身設計本身開發，仍是比較開心。