多彩宝移动端 UI 组件库

# Badge

# 基础渲染

5
10 
<template>
  <div class="flex">
    <d-badge :content="5">
      <div class="child" />
    </d-badge>
    <d-badge :content="10">
      <div class="child" />
    </d-badge>
    <d-badge content="Hot">
      <div class="child" />
    </d-badge>
    <d-badge dot>
      <div class="child" />
    </d-badge>
  </div>
</template>
<style lang="scss">
  .flex {
    display: flex;
    & > div {
      margin-right: 20px;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #d0d0d0;
      border-radius: 4px;
    }
  }
</style>

# 最大值

9+
20+
99+ 
<template>
  <div class="flex">
    <d-badge :content="20" max="9">
      <div class="child" />
    </d-badge>
    <d-badge :content="50" max="20">
      <div class="child" />
    </d-badge>
    <d-badge :content="200" max="99">
      <div class="child" />
    </d-badge>
  </div>
</template>
<style lang="scss">
  .flex {
    display: flex;
    & > div {
      margin-right: 20px;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #d0d0d0;
      border-radius: 4px;
    }
  }
</style>

# 自定义颜色

20
50
99+ 
<template>
  <div class="flex">
    <d-badge :content="20" color="#FF960A">
      <div class="child" />
    </d-badge>
    <d-badge :content="50" color="#FF960A">
      <div class="child" />
    </d-badge>
    <d-badge :content="200" color="#FF960A">
      <div class="child" />
    </d-badge>
  </div>
</template>
<style lang="scss">
  .flex {
    display: flex;
    & > div {
      margin-right: 20px;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #d0d0d0;
      border-radius: 4px;
    }
  }
</style>

# 自定义徽标内容

<template>
  <div class="flex">
    <d-badge>
      <div class="child" />
      <template #content>
        <d-icon name="select" class="badge-icon" />
      </template>
    </d-badge>
    <d-badge>
      <div class="child" />
      <template #content>
        <d-icon name="add" class="badge-icon" />
      </template>
    </d-badge>
    <d-badge>
      <div class="child" />
      <template #content>
        <d-icon name="close" class="badge-icon" />
      </template>
    </d-badge>
  </div>
</template>
<script>
  import DIcon from '@/components/icon/icon';
  export default {
    components: {
      DIcon,
    },
    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>
<style lang="scss">
  .flex {
    display: flex;
    & > div {
      margin-right: 20px;
    }
    .child {
      width: 40px;
      height: 40px;
      background: #d0d0d0;
      border-radius: 4px;
    }
    .badge-icon {
      display: block;
      font-size: 10px;
      line-height: 16px;
    }
  }
</style>

# 独立展示

9+
20+
99+ 
<template>
  <div class="flex">
    <d-badge :content="20" max="9" />
    <d-badge :content="50" max="20" />
    <d-badge :content="200" max="99" />
  </div>
</template>
<style lang="scss">
  .flex {
    display: flex;
    & > div {
      margin-right: 20px;
    }
  }
</style>

# # API

# # 属性

名称 说明 类型 默认值
content
徽标内容 string | number
color
徽标背景颜色 string #ee0a24
dot
是否展示为小红点 boolean false
max
最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效 string | number 99

# # 插槽

名称 说明 参数
default 徽标包裹的子元素 无
content 自定义徽标内容 无

# # 事件

无

# # 贡献者

无

← Swipe 轮播 →