Badge 徽标

示例

文字徽标

徽标内容可以是纯文本。

New
New
New
New
New

可以使用 type 属性，指定徽标在不同功能状态下的样式。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-badge
    value="New"
    type="success"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="info"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge value="New">
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="warning"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="aux"
  >
    <veui-button>View</veui-button>
  </veui-badge>
</article>
</template>

<script>
import { Badge, Button } from 'veui'

export default {
  components: {
    'veui-badge': Badge,
    'veui-button': Button
  }
}
</script>

<style lang="less" scoped>
.veui-badge {
  & + & {
    margin-left: 2em;
  }
}
</style>

数字徽标

徽标内容也可以是数字，超过最大值时可以显示为最大值+。

96

可以使用 max 属性，指定可现实数字的最大值，超过则显示为“max+”。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-badge
    :value="count"
    :max="100"
  >
    <veui-button
      ui="primary"
      @click="inc"
    >
      Add
    </veui-button>
  </veui-badge>
  <veui-button
    ui="s"
    @click="reset"
  >
    Reset
  </veui-button>
</article>
</template>

<script>
import { Badge, Button } from 'veui'

const initial = 96

export default {
  components: {
    'veui-badge': Badge,
    'veui-button': Button
  },
  data () {
    return {
      count: initial
    }
  },
  methods: {
    inc () {
      this.count++
    },
    reset () {
      this.count = initial
    }
  }
}
</script>

<style lang="less" scoped>
.veui-badge {
  margin-right: 2em;
}
</style>

圆点徽标

不提供徽标内容时，徽标将以圆点样式显示在右上角。

Running
New
Rejected
Auditing
Expired
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-badge type="success">
      Running
    </veui-badge>
    <veui-badge type="info">
      New
    </veui-badge>
    <veui-badge>
      Rejected
    </veui-badge>
    <veui-badge type="warning">
      Auditing
    </veui-badge>
    <veui-badge type="aux">
      Expired
    </veui-badge>
  </section>
</article>
</template>

<script>
import { Badge } from 'veui'

export default {
  components: {
    'veui-badge': Badge
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-badge {
  & + & {
    margin-left: 30px;
  }
}
</style>

圆点徽标

不提供插槽内容时，徽标将以圆点样式显示。

Running
New
Rejected
Auditing
Expired
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-badge
      value="Running"
      type="success"
    />
    <veui-badge
      value="New"
      type="info"
    />
    <veui-badge value="Rejected"/>
    <veui-badge
      value="Auditing"
      type="warning"
    />
    <veui-badge
      value="Expired"
      type="aux"
    />
  </section>
</article>
</template>

<script>
import { Badge } from 'veui'

export default {
  components: {
    'veui-badge': Badge
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-badge {
  & + & {
    margin-left: 30px;
  }
}
</style>

API

属性

名称类型默认值描述
typestring='error'

徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 .veui-badge-{type} 的样式。

值描述
info信息提示样式。
success成功样式。
warning警告样式。
error错误样式。
aux辅助样式。
valuestring | number-徽标内容值。为 number 类型值时，会受 max 属性限制。为 string 类型时，max 会被忽略。
maxnumber=badge.max徽标数值的最大值，当 value 超过此值时，徽标内容会显示为 {max}+。当 value 为 string 时会被忽略。
hiddenboolean=false是否处于隐藏状态。

插槽

名称描述
default需要显示徽标的目标内容。
在 GitHub 上编辑此页编辑