【笔记】消息数量提示图标

静态：

.box:before{content:"hello";}

        

          
        
        
        

          

          AI 代码解读
        
      
      

css3 里面的content 可以使用动态内容结合html5的自定义属性：

// html
<div class="box" :data-text="num">...</div>
// css
.box:before{content:attr(data-text);} /* data-text 是自定义属性 */

        

          
        
        
        

          

          AI 代码解读
        
      
      

当然，element-ui已经有了相应组件：
https://element.faas.ele.me/#/zh-CN/component/badge

拓展阅读：

• Vue自定义slot写消息提示小红点