# 封裝組件
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` | 圖表工具,常用圖表工具|