0


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

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

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

  1. 首先实现静态部分,需要一个容器,里面包含铃铛图标和显示消息数的文字标签
 <span  @click="hiddendanger">  //外层包裹的容器
       <i class="el-icon-bell" style="color:white;font-size: 24px;"></i>  //铃铛
       <div :style="{opacity}">99+</div>   //消息数
</span>

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

  1. 接下来实现呼吸灯效果,让显示消息数的标签闪烁跳动起来。
  • 在data中定义 opacity: 1,

  • 在methods中定义事件,实现呼吸灯效果
change () {
      setInterval(() => {
        this.opacity -= 0.01   
        if (this.opacity <= 0) this.opacity = 1  
      }, 16)
    },
  • 在mounted中调用该方法
mounted () {
    this.change()
  }

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


本文转载自: https://blog.csdn.net/qq_46103732/article/details/129012924
版权归原作者 alert(“不想秃头”) 所有, 如有侵权,请联系我们删除。

“Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果)”的评论:

还没有评论