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

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的百