Vue组件开发系列之Badge组件

一个数字角标组件

微信截图_20190807211532.png

演示地址：
http://widget-ui.cn/Badge

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

基本用法：

 <ul>
            <li>
                <wt-align>
                    <wt-badge title="" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" type="primary"></wt-badge>
                </wt-align>
            </li>
             <li>
                <wt-align>
                    <wt-badge title="99" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="99+" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="拒绝" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="生效中" type="primary"></wt-badge>
                </wt-align>
            </li>
        </ul>

组件结构：

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

代码分析：

props参数：

props: {
    title: {
      type: String | Number,
      default: () => {
        return '';
      }
    },
    type: {
      type: String,
      default: () => {
        return 'default';
      }
    }
  }

css代码：

<style lang="less" rel="stylesheet/less" scoped>
  .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;
    }
  }
</style>

演示地址：
http://widget-ui.cn/Badge

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