# 封裝組件 Vue中封裝組件的好處主要體現在以下幾個方面： 1. **提高代碼復用性**：封裝組件可以將常用的代碼塊封裝成一個獨立的組件，然后在需要的地方引用，避免了代碼重復編寫，提高了代碼復用性。 2. **提高開發效率**：組件化開發使得團隊成員可以獨立開發不同的組件，各自關注組件的實現細節，不需要關心整個頁面的實現，這樣可以并行開發不同的組件，提高開發效率。 3. **降低項目復雜度**：隨著項目規模的增大，頁面的復雜度也會增加。使用組件化開發可以將復雜的頁面拆分為多個獨立的組件，每個組件關注自己的功能，降低了整個項目的復雜度，使得代碼更加清晰和可維護。 4. **提升代碼可讀性**：組件化開發使代碼更加結構化和可讀，每個組件都是一個獨立的模塊，有自己的模板、樣式和邏輯。這樣開發者可以更容易理解和維護代碼，也方便其他人理解和使用組件。 5. **更好的團隊協作**：組件化開發使得團隊成員可以按照各自的專長和責任進行開發，每個人負責一部分組件。這樣可以更好地分工合作，提升團隊的協作效率。 然而，雖然封裝組件有很多好處，但過度封裝也可能帶來一些負面影響，如增加代碼的復雜度、引入額外的性能開銷、增加學習成本以及可能降低組件或功能的靈活性。因此，在實際開發中，我們內部封裝一個組件庫，主要封裝實用功能，拒絕重復沒必要的工作。 ## **彈窗要求統一優化** 1.添加類型的彈窗，不允許點擊陰影關閉彈窗 2.信息類型的彈窗允許點擊陰影關閉彈窗 3.管理后臺彈窗的大小在1200px或者是 70%的大小 4.彈窗超出高度后，中間部分需要顯示滾動條 ## **要求 table統一優化** 1.只有 刪除 和編輯的情況下， 顯示圖標+文字的方式顯示 2.三個按鈕，且按鈕都為兩個字節的情況下， 顯示圖標+文字的方式顯示 3.三個按鈕以上，且文字都大于兩個字節，顯示一個詳情，一個更多，更多里面放相關操作 4.列表統一使用統一樣式，自定義列表鼠標放上去的陰影效果，根據項目主體進行自定義 5.支持導入、導出、批量操作、批量刪除操作 6.支持表格排序：創建時間、修改時間等關鍵信息排序 7.列表上標簽需要定義顏色，可封裝成組件。 8.特色功能：批量新增，批量編輯 9.常用查詢需要封裝：例如：文案模糊搜索，按照時間范圍搜索 ## **搜索欄統一優化** 1.統一封裝搜索欄，傳入相應的js數組加載對于的搜索 2.封裝內容包括：搜索字符串、搜索數組類型字符串、搜索時間、搜索時間范圍、下拉選擇框（單選多選） 、關聯搜索（比如說搜索用戶，彈出用戶列表，選擇用戶進行搜索，支持單選多選） ## 常用插件 我們不生產?`代碼`，我們只是?`代碼`的搬運工 | 插件 | 描述 | | --- | --- | | `elemntUI` | 不必過多介紹 | | `elemntUI棚格布局` | 經典的自適應布局,為什么會想到呢，因為以后開發的基本都用它 | | `flex` | 各方面吊打float,內部組件常用 | | `swiper` | 常用的輪播圖組件，在框架里基本用不到 | | `echarts` | 圖表工具，常用圖表工具|