![cover](https://img-blog.csdnimg.cn/cce1418685a643949a9add9e253ecc58.png)
Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果)
在项目开发过程中,可能需要实现以下场景:未读消息提示、报警信息、消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示。首先实现静态部分,需要一个容器,里面包含铃铛图标和显示消息数的文字标签。接下来实现呼吸灯效果,让显示消息数的标签闪烁跳动起来。在data中定义opacity: 1,在methods中定义事件,实现呼吸灯效果。调整一下样式后就达到了
·
在项目开发过程中,可能需要实现以下场景:未读消息提示、报警信息、消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示
![](https://i-blog.csdnimg.cn/blog_migrate/ced7e3e7850e6660665f0a1d7886a619.png)
下面分享一下这类效果的实现方法:
首先实现静态部分,需要一个容器,里面包含铃铛图标和显示消息数的文字标签
<span @click="hiddendanger"> //外层包裹的容器
<i class="el-icon-bell" style="color:white;font-size: 24px;"></i> //铃铛
<div :style="{opacity}">99+</div> //消息数
</span>
调整一下样式后就达到了静态的效果
![](https://i-blog.csdnimg.cn/blog_migrate/51f883cee1eea50883d7809c19dce655.png)
接下来实现呼吸灯效果,让显示消息数的标签闪烁跳动起来。
在data中定义 opacity: 1,
![](https://i-blog.csdnimg.cn/blog_migrate/01fe9ed8d2c8bf89da346e1cdb4a7e0a.png)
在methods中定义事件,实现呼吸灯效果
change () {
setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)
},
在mounted中调用该方法
mounted () {
this.change()
}
这样就实现了一个简单的呼吸灯效果
更多推荐
所有评论(0)