Baidu DLS

返回 DLS

Badge 徽标

示例

文字徽标

徽标内容可以是纯文本。

New
New
New
New
New

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

<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>

数字徽标

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

96

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

<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>

圆点徽标

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

Running
New
Rejected
Auditing
Expired
<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>

API

属性

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

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

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

插槽

名称描述
default需要显示徽标的目标内容。