年前最後一個海南項目，忙炸了，每天末班車也是麻木了。從上週接的一個組件開發需求，掰掰手指頭算下來也耗時了半個月，超難呀，回想年初老大挨個約談時候聊本身手頭作的組件太簡單，真是老臉一紅。
一、首先就是超複雜的結構樣式，剛拿到需求寫demo時候就已經錯了好幾回方向，錯誤的html結構會致使後面css樣式和js邏輯超級無敵困難。
二、大佬的指導的思路是採用拆分紅父子組件的方式分別進行，整個面板做爲父組件完成單個線路切換的邏輯，每一個單獨的線路做爲子組件來解決繁瑣的點擊事件。好嘛，又是我沒觸及過的點，父子組件咋搞喲。
三、拆分紅父子組件碰了一鼻子灰，但最艱難的每每是邏輯實現部分。整個面板分紅啓用區域和未啓用區域，經過底部的按鈕控制切換，如何實現動態數據下自適應切換。
四、單獨線路中須要比較系統時間和數據時間，相同時候當前點位須要總體變成黃色，下一個點位時間到來時候再恢復原樣。
一、首先是結構問題，寫過好幾個版本，最終肯定的是分三部分：header、content、footer三部分，header做爲標題區域顯示title和按鈕，要求按鈕能夠隨着啓用區域寬度變化。Footer底部部分放巡檢按鈕，這裏須要調用另一個地圖組件的方法。Content部分就是主體的線路展現區域，根據後端數據動態顯示線路。
1.一、寫得越多的樣式就越以爲css真難，有更多的點須要學習。頭部的標題部分不能設置width具體值，只設置固定的高度值，設置按鈕爲相對定位靠右間距爲0，那這樣就實現了按鈕位置隨着組件寬度改變位置。
1.二、Content中調用方法根據數據動態建立一個line線路容器，在線路容器中再根據數據動態建立點位。
二、同一組件下父子組件的寫法，只須要在index.js文件直接引入子組件。子組件中書寫格式按照element同樣就能夠了，可是要刪除原有的build.json內容，沒有label和version。其餘的都同樣了，在子組件中properties數據也是相通的，能夠直接定義。
三、寫content的代碼時候，須要理解一個思路，不要根據數據去操做dom節點，而是把每個模塊做爲對象數組中每一項。數據是數組格式，數據中每一項是一個對象，每一對象就是一個line容器，對象中數據就是line容器中每個點位數據。那增減的操做其實就是對數組的操做。
3.一、建立line容器定義一個方法creatLine，數據數組中自定義個一個屬性selected，值爲0或1，認定1的值爲啓用的line，0則是未啓用。
3.二、建立完line容器以後就能夠建立點位，定義一個方法叫createLineChild，在這個方法裏就能夠完整的寫內部的具體樣式。根據效果圖仍是能很清晰看出單個line容器的佈局仍是老三分，線路方案名稱、點位內容和底部按鈕。這裏涉及到不少點擊事件改變樣式的問題，若是使用操做dom節點會特別麻煩，仍是要採用數據的思想，每個line對象上自定義一個屬性active。標題下的選擇框和底部按鈕都用到了，啓用區域點擊選擇框隱藏底部按鈕，點擊底部按鈕即表明這個線路移入未啓用區域，底部按鈕背景圖改變。
樣式的改變用先定義好的方式，屬性值改變就採用不一樣的樣式，這裏就用到三元表達式，三元...還記得嗎？
四、定義完每個line的樣式，其中的content內容仍是空的，這還須要單獨寫一個方法createPoint，專門用來建立點位內容，效果圖中看到一條線路上要在起始點和終點顯示的文字內容不同，根據point數據數組下標來解決這個問題，當數據中元素下標爲0就是第一條數據，給個樣式名start，以此類推。
偶雞兒KK，就這樣吧，但難點遠不止這些，還有不少點擊事件也很複雜，對我來講很複雜，決定專門寫一篇總結那塊內容吧。
本文分享自微信公衆號 - 前端一塊兒學（gh_3ba18d51f982）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。css
