# 封装组件 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` | 图表工具，常用图表工具|