在项目开发过程中，可能需要实现以下场景：未读消息提示、报警信息、消息通知等，这些功能往往是在页面的右上角设置一个铃铛，在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示
下面分享一下这类效果的实现方法：
首先实现静态部分，需要一个容器，里面包含铃铛图标和显示消息数的文字标签
<span @click="hiddendanger"> //外层包裹的容器
<i class="el-icon-bell" style="color:white;font-size: 24px;"></i> //铃铛
<div :style="{opacity}">99+</div> //消息数
</span>调整一下样式后就达到了静态的效果
接下来实现呼吸灯效果，让显示消息数的标签闪烁跳动起来。
在data中定义 opacity: 1,
在methods中定义事件，实现呼吸灯效果
change () {
setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)
},在mounted中调用该方法文章来源：https://www.toymoban.com/news/detail-692856.html
mounted () {
this.change()
}这样就实现了一个简单的呼吸灯效果文章来源地址https://www.toymoban.com/news/detail-692856.html
到了这里，关于Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
