用比较简单的方式实现消息数量提示

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

效果预览

前言

在页面上，有时需要提示用户有新消息或者有多少消息未读，通常会在相关元素的右上角添加一个数字，用于提示还有多少消息未读。在element-ui中也有一个badge组件，但是每次使用都觉得不够简便，而且还嵌套了额外的元素。通常，在大部分情况下并不需要这么复杂的东西，本文记叙了一种比较简单的方式来实现这个效果，虽然并没有el-badge全面，但也能满足大多数情况下的需求。

基本思路

1.使用元素本身的::after或者::before伪元素，来减少额外标签的使用，同时因为这两个伪元素显示的值是用content属性设置的, 也方便进行数字显示和更改，具体看第2点。 2.伪元素显示的内容，可以通过data-定义在元素上，然后使用css的attr()函数，这是一个css函数，用于返回选择元素的属性值，attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content属性, 具体见MDN， 这样就能获取定义在原元素上的data-的值，写法如下:

.badge::after {
  content: attr(data-newsnum);
}

3.然后通过定位position、或者变换transform等方式对其位置进行设定，一般来说比较推荐使用绝对定定位position: absolute，这样可以脱离文档流，不再占据位置。 4.如果需要更改显示的数字时，只需要更改元素上定义的data-属性即可，也比较简单方便。

完整代码

<!-- 给目标元素添加badge类名， 同时，添加自定义属性data-newsnum，用于记录需要显示的数量 -->
<div class="news badge" data-newsnum="6">
  新消息
</div>

.news {
  display: inline-block;
  padding: 6px 10px;
  background-color: #a855f7;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

/* 消息数量提示 */
.badge {
  /* 元素添加定位 */
  position: relative;
}
.badge::after {
  /* 获取元素上自定义值，并赋予content */
  content: attr(data-newsnum);
  /* 设置绝对定位 */
  position: absolute;
  /* 左右和上下的边距推荐使用padding
   * 如果使用widt或者height来设定大小，很难去匹配文本的宽度，设置得太宽，也不好看
  */
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  background-color: #ec4899;
  top: -6px;
  right: -6px;
  border-radius: 50%;
}