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

课程内容：

今天学习的内容包括：
4-11 城市选择组件-组合式使用组件完成基本布局——介绍实现效果，初步基于 el-icon、el-popover 实现点击切换及弹出内容效果。
4-12 城市选择组件-获取城市数据并显示所有城市——书写城市选择组件数据，实现按城市按省份radio组，下拉选择模块，下方城市区域按照字母进行排序。
4-13 城市选择组件-绑定事件并实现点击字母跳转到对应区域——目前是按照城市进行展示，此处点击字母跳到对应的字母城市组。

课程收获：

组合式使用组件完成基本布局

1、实现一个城市的选择，在一些项目中是需要的，因此基于element-plus封装一个城市选择组件
2、我们先初步 基于el-icon、el-popover 实现基础弹窗效果

 <div class="result">
   <div class="text">{{ result }}</div>
   <div class="">
     <el-icon-arrowup v-if="visible"></el-icon-arrowup>
     <el-icon-arrowdown v-else></el-icon-arrowdown>
   </div>
 </div>

获取城市数据并显示所有城市

1、原先我们的省市区是数据格式的，因此我们使用了老师的对象模式进行开发
2、使用栅格实现头部的模式切换以及下拉搜索
3、实现字母的循环渲染使用 Object.keys()
4、渲染所有的城市

<div
   class="city-item"
   v-for="(item, index) in Object.keys(cities)"
   @click="clickChat(item)"
   :key="index"
 >
  {{ item }}
</div>

绑定事件并实现点击字母跳转到对应区域

1、点击城市选择右侧图标动画效果

transform: rotate(180deg);
transition: all 0.25s linear;

2、点击字母跳转到对应的字母城市

首先获取dom节点
使用dom.scrollIntoView()进行跳转

3、解决点击后el-popover不消失问题，通过测试发现因为 element-plus 版本导致

pnpm update element-plus

今天学习的有点多，就简单记录一下吧，通过今天的学习，理解了组件的封装并不一定只是一个功能的封装，也可以是多个功能的结合封装使用，在工作中可以把业务和功能尽量的分离，才能便于维护和提升。

下一步就是学习 城市选择按省份封装及完善城市选择组件 了。今天学习就先到这里吧。

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

​