【学习打卡】第9天 封装组件初级篇

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节： 封装组件初级篇
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
3-7 通知菜单-封装一个列表组件(下)——结合 el-tabs、el-scrollbar 将通知菜单的列表封装完成，列表中不同显示内容的处理等。
3-8 通知菜单-完善list组件并融合进通知菜单——结合 el-popover 组件通过点击通知标识进弹出 list 组件。
3-9 给趋势标记增加自定义文字大小功能——加入 fontSize 参数进行控制字体大小，默认12px。
3-10 给通知菜单添加禁用状态——通过设置 el-popover 组件的 disabled 达成是否显示弹出的目的。
3-11 本章回顾——本章主要完成了趋势标记、通知列表、通知菜单组件的封装。

课程收获：

封装一个列表组件(下)

1、根据常用通知列表显示的内容进行假数据编写
2、通知菜单需要显示tabs、container、actions

 <el-tabs class="list-tabs__item">
    <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.title">
      <el-scrollbar height="200px">
        ...
      </el-scrollbar>
    </el-tab-pane>
    <div class="actions">
      ...
    </div>
  </el-tabs>

3、封装完成后 将对应的点击等事件进行 emits 处理

 emits('clickItem', { item, index })

完善list组件并融合进通知菜单

1、为了更好的进行配置对 el-popover 的 width、placement 进行传参处理
2、再通知组件中接收 emits 事件

 <el-popover
   :width="popoverWidth"
   :placement="popoverPlacement"
   popper-class="list-popover"
   trigger="click"
 >
  ...
 </el-popover>
 
 <m-list
   :list="list"
   :actions="actions"
   @clickItem="clickItem"
   @clickAction="clickAction"
 ></m-list>

给趋势标记增加自定义文字大小功能

 fontSize: {
      type: String,
      default: '12px'
    },

给通知菜单添加禁用状态

:disabled="popoverDisabled"

今天的学习让我更加了解多个组件的结合使用，事件的处理，样式是否显示等效果的巧妙处理，使用组件能够节省我们大量时间，提升个人能力。

下一步就是学习 封装组件中级篇了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​