为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第12天 封装组件中级篇

标签:
Vue.js

课程名称:基于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

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

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

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

https://img2.sycdn.imooc.com/62f7515f00017f9a19200897.jpg

https://img1.sycdn.imooc.com/62f768490001eb2819200897.jpg

https://img3.sycdn.imooc.com/62f76c1f00012ce719200897.jpg

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消