Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果) |
您所在的位置:网站首页 › 小铃铛制作过程 › Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果) |
在项目开发过程中,可能需要实现以下场景:未读消息提示、报警信息、消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示 下面分享一下这类效果的实现方法: 首先实现静态部分,需要一个容器,里面包含铃铛图标和显示消息数的文字标签 //外层包裹的容器 //铃铛 99+ //消息数调整一下样式后就达到了静态的效果 接下来实现呼吸灯效果,让显示消息数的标签闪烁跳动起来。 在data中定义 opacity: 1, 在methods中定义事件,实现呼吸灯效果 change () { setInterval(() => { this.opacity -= 0.01 if (this.opacity |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |