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

alert（“不想秃头”）

于 2023-02-13 17:24:31 发布

阅读量9.7k

点赞数 5

本文链接：https://blog.csdn.net/qq_46103732/article/details/129012924

版权

前端专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何在项目开发中创建一个包含未读消息提示和报警信息的组件，特别是通过Vue.js实现动态的呼吸灯效果。首先，创建包含铃铛图标和消息数的静态结构，然后通过调整CSS样式得到初步效果。接着，利用Vue的数据绑定和方法，定义周期性改变透明度的函数，实现在mounted生命周期钩子中启动呼吸灯动画，使消息数标签闪烁跳动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

 <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中调用该方法

mounted () {
    this.change()
  }

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