Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）

在项目开发过程中，可能需要实现以下场景：未读消息提示、报警信息、消息通知等，这些功能往往是在页面的右上角设置一个铃铛，在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示

下面分享一下这类效果的实现方法：

1. 首先实现静态部分，需要一个容器，里面包含铃铛图标和显示消息数的文字标签

 <span  @click="hiddendanger">  //外层包裹的容器
       <i class="el-icon-bell" style="color:white;font-size: 24px;"></i>  //铃铛
       <div :style="{opacity}"&gt;99+</div&gt;   //消息数
</span&gt;

调整一下样式后就达到了静态的效果

2. 接下来实现呼吸灯效果，让显示消息数的标签闪烁跳动起来。

• 在data中定义 opacity: 1,

• 在methods中定义事件，实现呼吸灯效果

change () {
      setInterval(() => {
        this.opacity -= 0.01   
        if (this.opacity <= 0) this.opacity = 1  
      }, 16)
    },

• 在mounted中调用该方法

mounted () {
    this.change()
  }

这样就实现了一个简单的呼吸灯效果