Badge 标记

基础用法

<template>
  <div>
    <plv-badge :value="10">
      <div class="demo-badge-box"></div>
    </plv-badge>

    <plv-badge :value="2">
      <div class="demo-badge-box"></div>
    </plv-badge>

    <plv-badge :value="66" badge-color="#2196f3">
      <div class="demo-badge-box"></div>
    </plv-badge>
  </div>
</template>

显示代码

标记图标

<template>
  <div>
    <plv-badge badge-icon="badge-new">
      <plv-button
        link-btn
        value="文本描述"
      />
    </plv-badge>

    <plv-badge badge-icon="badge-beta">
      <plv-button
        link-btn
        value="文本描述"
      />
    </plv-badge>
  </div>
</template>

显示代码

最大值

<template>
  <plv-badge :value="100" :max="50">
    <div class="demo-badge-box"></div>
  </plv-badge>
</template>

显示代码

使用文本

<template>
  <div>
    <plv-badge value="new">
      <div class="demo-badge-box"></div>
    </plv-badge>

    <plv-badge value="well">
      <div class="demo-badge-box"></div>
    </plv-badge>
  </div>
</template>

显示代码

使用圆点

<template>
  <div>
    <plv-badge is-dot>
      <div class="demo-badge-box"></div>
    </plv-badge>

    <plv-badge is-dot badge-color="#2196f3">
      <div class="demo-badge-box"></div>
    </plv-badge>
  </div>
</template>

显示代码

Attributes

参数	说明	类型	可选值	默认值
value	标记内容	String Number	-	-
max	最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型	Number	-	-
badge-color	标记颜色	String	-	#FF5722
hidden	隐藏标记	Boolean	-	false
badge-icon	标记图标	String	-	-
badge-icon-size	标记图标字体大小	String	-	16px