el-badge 实现数据为0的时候不显示红点

2023-12-13 04:31:05

前言

el-badge 是elementui的组件,通过一定的偏移量进行显示数字
使用

   <el-badge :value="noticesNum"  :max="99">
        <span class="header-notice-icon">
          <IconifyIconOffline :icon="Bell" />
        </span>
      </el-badge>

配置

:value="“显示value数字
is-dot 显示红点不显示数字
:hidden=”"不显示的设置
max是最大数字 只有在value的时候生效 数字超过max就是显示99+

代码

      <el-badge :value="noticesNum" :hidden="noticesNum == 0" :max="99">
        <span class="header-notice-icon">
          <IconifyIconOffline :icon="Bell" />
        </span>
      </el-badge>

当noticesNum为0的时候就不显示红点
在这里插入图片描述
在这里插入图片描述

文章来源:https://blog.csdn.net/m0_56666791/article/details/134872133
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。