vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否

本文详细介绍了如何使用Vue实现Badge组件,包括消息标记、最大值判断和不同展现形式,并通过源码分析探讨了CSS百分比单位的应用,强调了模板代码的简洁性和可维护性。
摘要由CSDN通过智能技术生成

Badge组件主要用于数字或状态的标记,对于消息类的提醒功能,使用这组件还是很常见的。具体显示效果如下图:

不管组件复杂还是简单,编码实现这个组件的都不是源码分析目的。

源码分析,在于通过一步步的实现这个功能,在这个过程中,看自己能学到什么,发现哪些问题。

然后通过这些问题,去扩展知识点,最终完成 实践 - 思考 - 扩展 这三步。

1.实现基本功能,按钮右上角显示消息

第一步的实现很简单,具体的可以看示例代码,主要点在于css的思路。

仔细看,标记相对于父元素,badge的显示区域定位时只有左上角的一小部分和父元素重叠。通过下面的css可以实现这个功能。

{ {value}}

.al-badge {

display: inline-block;

position: relative;

}

.al-badge--content {

position: absolute;

right: 10px;

top: 0;

transform: translateX(100%) translateY(-50%);

}

开始的时候,我还想着怎么通过right + margin属性实现。但是看源码发现这种实现方式,感觉也是很简洁。那么问题就来了,对于css的百

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值