Vue组件开发系列之badge组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/badge

FireShot Capture 8 - nvx - http___localhost_8080_demo#_badge.png

组件结构：

<template>
    <div class="wt-badge" :class="type">
        {{title}}
    </div>
</template>

代码分析：

props参数：

props: {
    title: { // 组件显示的文字 （可选）
      type: String | Number, 
      default: () => {
        return '';
      }
    },
    type: { // （可选）主要是背景色的不同（可选值："primary", "default")
      type: String,
      default: () => {
        return 'default';
      }
    }
  }

css代码：

.wt-badge {
    padding: 0.3rem;
    display: inline-block;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.6rem;
    min-width: 0.6rem;
    min-height: 0.6rem;
    box-sizing: border-box;
    line-height: 0.4rem;
    text-align: center;
    &.default {
        background: #ef4f4f;
    }
    &.primary {
        background: #1BB5F1;
    }
  }