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

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

标签:
Vue.js

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

课程内容:

今天学习的内容包括:
3-5 通知菜单-icon和badge组件的组合使用——基于element-plus的icon和badge组合封装显示通知菜单效果。
3-6 通知菜单-封装一个列表组件(上)——初步封装点击后弹出通知内容弹窗。

课程收获:

icon和badge组件的组合使用

1、首先我们先定义好组件需要的参数

 // 显示图标
    icon: {
      type: String,
      default: 'Bell'
    },
    //  通知数量
    value: {
      type: [String, Number],
      default: 0
    },
    // 最大值
    max: {
      type: Number
    },
    //  是否显示数量
    isDot: {
      type: Boolean,
      default: false
    }

2、将icon和badge组件组合封装使用,让我们能够根据自己的需求显示对应效果的通知菜单效果

<el-badge
        style="cursor: pointer"
        :value="value"
        :max="max"
        :is-dot="isDot"
      >
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>

封装一个列表组件(上)

1、把封装组件使用到的interface集中书写,利于维护和管理
2、使用PropType可以让Ts深入到子项进行类型断言,减少出错情况
3、初步书写组件接收参数

 //  列表的内容
    list: {
      type: Array as PropType<ListOptions[]>,
      required: true
    },
    //  操作的内容
    actions: {
      type: Array as PropType<ActionOptions[]>,
      default: () => []
    }

通过这些天的学习,我发现在学习之后再次整理所学内容进行发布,可以让自己掌握所学知识,有所思考,这种学习习惯是非常有帮助的。

下一步就是学习 完善通知菜单的封装了。今天学习就先到这里吧。

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

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

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

点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消