使用scss封装支持伪元素角标指示器的通用css组件，核心在于利用 ::before 或 ::after 伪元素配合绝对定位，并通过 @mixin 接收位置、尺寸和颜色参数。这样可以在不增加dom节点的情况下，为任意容器添加视觉指示器，且样式完全由调用方控制。
如何定义基础角标位置的映射关系
确定角标在父容器中的具体方位是封装的第一步，通常通过 $position 参数传入如 top-right 或 bottom-left 的字符串值。在SCSS中，可以使用 @if 或 @each 指令将方位字符串转换为具体的 top, right, bottom, left 属性值以及对应的 transform 偏移量。这种映射确保了角标能准确贴合在容器的四个角落或边缘，同时保持与父元素的相对位置不变。
.badge-mixin($pos: 'top-right', $size: 8px, $color: red) {
position: relative;
&::before {
content: '';
position: absolute;
width: $size;
height: $size;
background-color: $color;
border-radius: 50%;
@if $pos == 'top-right' {
top: 0;
right: 0;
transform: translate(50%, -50%);
} @else if $pos == 'bottom-left' {
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
}
}
如何处理角标与父元素边框的重叠问题
当父容器拥有边框时，角标可能会覆盖边框或显得突兀，此时需要调整 z-index 或使用 box-shadow 来增强层次感。更常见的做法是允许用户指定角标的 margin 或 offset，使其稍微脱离边缘，或者通过 border-box 盒模型确保尺寸计算准确。此外，可以引入一个 $overlap 布尔参数，若为真，则角标会覆盖父元素背景；若为假，则通过负边距或阴影将其“推”入内部或外部空间，以适应不同的UI设计风格。
.badge-mixin($pos: 'top-right', $size: 8px, $color: red, $overlap: true) {
position: relative;
&::before {
content: '';
position: absolute;
width: $size;
height: $size;
background-color: $color;
border-radius: 50%;
z-index: 1;
@if $overlap {
// 默认行为：覆盖角落
top: 0;
right: 0;
transform: translate(50%, -50%);
} @else {
// 非重叠：向内缩进
top: -$size/2;
right: -$size/2;
box-shadow: 0 0 0 2px white; // 假设背景色为white
}
}
}
基于输入参数 $size 的动态尺寸调整效果
在实际使用中，$size 参数直接决定了角标的视觉权重。如果 $size 设置为 4px，角标表现为细微的红点；若设置为 16px 并配合文字内容，则可作为通知徽章。通过SCSS变量传递尺寸，使得同一套逻辑能适应从极简图标到复杂通知标签的各种场景。开发者只需修改传入的数值，即可在不改变布局结构的前提下，实现角标大小的平滑过渡，确保设计系统的灵活性与一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
