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

前言

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的时候就不显示红点
在这里插入图片描述
在这里插入图片描述

你可能感兴趣的:(elementui)