课程名称：基于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
今天学习的有点多，就简单记录一下吧，通过今天的学习，理解了组件的封装并不一定只是一个功能的封装，也可以是多个功能的结合封装使用，在工作中可以把业务和功能尽量的分离，才能便于维护和提升。
下一步就是学习 城市选择按省份封装及完善城市选择组件 了。今天学习就先到这里吧。
坚持打卡，坚持学习，未来可期，加油😀~