绝配前端组件库

# Badge 标记

出现在按钮、图标旁的数字或状态标记。

# 基础用法

基础用法

展示新消息数量。

<template>
  <div>
    <jp-badge :value="12" class="item">
      <jp-button size="small">评论</jp-button>
    </jp-badge>
    <jp-badge :value="3" class="item">
      <jp-button size="small">回复</jp-button>
    </jp-badge>
    <jp-badge :value="1" class="item" type="primary">
      <jp-button size="small">评论</jp-button>
    </jp-badge>
    <jp-badge :value="2" class="item" type="warning">
      <jp-button size="small">回复</jp-button>
    </jp-badge>

    <jp-dropdown trigger="click">
      <span class="jp-dropdown-link">
        点我查看
        <i class="jp-icon-caret-bottom jp-icon--right"></i>
      </span>
      <jp-dropdown-menu slot="dropdown">
        <jp-dropdown-item class="clearfix">
          评论
          <jp-badge class="mark" :value="12" />
        </jp-dropdown-item>
        <jp-dropdown-item class="clearfix">
          回复
          <jp-badge class="mark" :value="3" />
        </jp-dropdown-item>
      </jp-dropdown-menu>
    </jp-dropdown>
  </div>
</template>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>
显示代码

# 其他

可自定义最大值。由 max 属性定义，它接受一个Number，需要注意的是，只有当value为Number时，它才会生效。

可以显示数字以外的文本内容, 定义value为String类型是时可以用于显示自定义文本。

除了数字外，设置is-dot属性，它接受一个Boolean。

<template>
  <div>
    <div>
      <jp-badge :value="200" :max="99" class="item">
        <jp-button size="small">评论</jp-button>
      </jp-badge>
      <jp-badge :value="100" :max="10" class="item">
        <jp-button size="small">回复</jp-button>
      </jp-badge>
    </div>

    <div class="block">
      <jp-badge value="new" class="item">
        <jp-button size="small">评论</jp-button>
      </jp-badge>
      <jp-badge value="hot" class="item">
        <jp-button size="small">回复</jp-button>
      </jp-badge>
    </div>
    <div class="block">
      <jp-badge is-dot class="item">数据查询</jp-badge>
      <jp-badge is-dot class="item">
        <jp-button class="share-button" icon="jp-icon-share" type="primary"></jp-button>
      </jp-badge>
    </div>
  </div>
</template>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.block {
  margin-top: 30px;
}
</style>
显示代码

# Attributes

参数 说明 类型 可选值 默认值
value 显示值 string, number — —
max 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 number — —
is-dot 小圆点 boolean — false
hidden 隐藏 badge boolean — false
type 类型 string primary / success / warning / danger / info —

← Avatar 头像 →