Realize message reminder/alarm/unread message in Vue project (bell plus small dot flashing effect)

During the project development process, the following scenarios may need to be implemented: unread message prompts, alarm messages, message notifications, etc. These functions are often set up a bell in the upper right corner of the page, displaying the number of messages and breathing in the upper right corner of the bell or icon light effect display

Here's how to achieve this effect:

1. First implement the static part, you need a container that contains a bell icon and a text label that displays the number of messages

 <span  @click="hiddendanger">  //外层包裹的容器
       <i class="el-icon-bell" style="color:white;font-size: 24px;"></i>  //铃铛
       <div :style="{opacity}">99+</div>   //消息数
</span>

After adjusting the style, the static effect is achieved

2. Next, realize the breathing light effect, so that the label displaying the number of messages flashes and dances.

• Define opacity in data: 1,

• Define events in methods to achieve the breathing light effect

change () {
      setInterval(() => {
        this.opacity -= 0.01   
        if (this.opacity <= 0) this.opacity = 1  
      }, 16)
    },

• Call this method in mounted

mounted () {
    this.change()
  }

This achieves a simple breathing light effect