VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Badge 徽标

示例

文字徽标

徽标内容可以是纯文本。

New
New
New
New
New

可以使用 status 属性，指定徽标的不同状态。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-badge
    class="badge"
    value="New"
    status="success"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="info"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="warning"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="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>
.badge {
  & + & {
    margin-left: 2em;
  }
}
</style>

数字徽标

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

96

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-badge
    class="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>
.badge {
  margin-right: 2em;
}
</style>

飘角徽标

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

Running
New
Rejected
Auditing
Expired
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-badge
      class="badge"
      status="success"
    >
      Running
    </veui-badge>
    <veui-badge
      class="badge"
      status="info"
    >
      New
    </veui-badge>
    <veui-badge class="badge">
      Rejected
    </veui-badge>
    <veui-badge
      class="badge"
      status="warning"
    >
      Auditing
    </veui-badge>
    <veui-badge
      class="badge"
      status="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;
}

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

圆点徽标

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

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

<script>
import { Badge } from 'veui'

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

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

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

API

属性

名称类型默认值描述
statusstring'error'

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

值描述
info信息提示状态。
success成功状态。
warning警告状态。
error错误状态。
aux辅助状态。
typestring'error'已废弃。请使用 status 属性代替。
valuestring | number-徽标内容值。为 number 类型值时，会受 max 属性限制。为 string 类型时，max 会被忽略。
maxnumberbadge.max徽标数值的最大值，当 value 超过此值时，徽标内容会显示为 {max}+。当 value 为 string 时会被忽略。
hiddenbooleanfalse是否处于隐藏状态。

插槽

名称描述
default需要显示徽标的目标内容。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024