AsUI

Badge标记

# 基础用法

评论 回复 评论 回复
<template>
  <div class="t-basic-badge-area">
    <as-badge :value="12" class="item">
      <as-button size="small">评论</as-button>
    </as-badge>
    <as-badge :value="3" class="item">
      <as-button size="small">回复</as-button>
    </as-badge>
    <as-badge :value="1" class="item" type="primary">
      <as-button size="small">评论</as-button>
    </as-badge>
    <as-badge :value="2" class="item" type="warning">
      <as-button size="small">回复</as-button>
    </as-badge>
  </div>
</template>
<script>
export default {
  name: "t-basic-badge",
}
</script>
<style>
.t-basic-badge-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.t-basic-badge-area .item{
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
Expand Copy

# 最大值

评论 回复
<template>
  <div class="t-max-badge-area">
    <as-badge :value="200" :max="99" class="item">
      <as-button size="small">评论</as-button>
    </as-badge>
    <as-badge :value="100" :max="10" class="item">
      <as-button size="small">回复</as-button>
    </as-badge>
  </div>
</template>
<script>
export default {
  name: "t-max-badge",
}
</script>
<style>
.t-max-badge-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.t-max-badge-area .item{
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
Expand Copy

# 自定义内容

评论 回复
<template>
  <div class="t-custom-badge-area">
    <as-badge value="new" class="item">
      <as-button size="small">评论</as-button>
    </as-badge>
    <as-badge value="hot" class="item">
      <as-button size="small">回复</as-button>
    </as-badge>
  </div>
</template>
<script>
export default {
  name: "t-max-badge",
}
</script>
<style>
.t-custom-badge-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.t-custom-badge-area .item{
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
Expand Copy

# 小红点

数据查询 
<template>
  <div class="t-hot-badge-area">
    <as-badge is-dot class="item">数据查询</as-badge>
    <as-badge is-dot class="item">
      <as-button class="share-button" icon="as-icon-share" type="primary"></as-button>
    </as-badge>
  </div>
</template>
<script>
export default {
  name: "t-max-badge",
}
</script>
<style>
.t-hot-badge-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.t-hot-badge-area .item{
  margin-right: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
Expand Copy

# Attributes

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

← Empty空状态 →