Vue组件开发系列之Circle组件

一个复选框组件

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

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

微信截图_20190808203847.png

基本用法：

<ul>
            <li>
                <wt-circle>
                        <wt-row>
                            <wt-padding only='0.8 0.6 1'>
                            <wt-font size='0.7'>透明度0.1</wt-font>
                            </wt-padding>
                        </wt-row>
                </wt-circle>
            </li>
            <li>
             <wt-circle>
                <wt-row>
                    <img src='https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/822.jpg' width="30px" height="30px" style="margin:5px; border-radius:30px;">
                    <wt-padding only='0 0.6 0 0'>
                    <wt-font size='0.8'>Micsoft</wt-font>
                    </wt-padding>
                </wt-row>
             </wt-circle>
            </li>
            <li>
             <wt-circle>
                <wt-row>
                    <img src='https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/823.jpg' width="30px" height="30px" style="margin:5px; border-radius:30px;">
                    <wt-font size='0.8'>Coutomer</wt-font>
                    <wt-padding>
                    <i class="icon-close-fill"></i>
                    </wt-padding>
                </wt-row>
                </wt-circle>
            </li>
            <li>
             <wt-circle type="danger">
                <wt-row>
                    <img src='https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/824.jpg' width="30px" height="30px" style="margin:5px; border-radius:30px;">
                    <wt-font size='0.8'>Coutomer</wt-font>
                    <wt-padding>
                    <i class="icon-close-fill"></i>
                    </wt-padding>
                </wt-row>
             </wt-circle>
            </li>
            <li>
              <wt-circle type="primary">
                <wt-row>
                    <img src='https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/822.jpg' width="30px" height="30px" style="margin:5px; border-radius:30px;">
                    <wt-padding only='0 0.6 0 0'>
                        <wt-font size='0.8'>Hello</wt-font>
                    </wt-padding>
                </wt-row>
              </wt-circle>
            </li>
            <li>
                <wt-circle type="primary" size="5">
                    <wt-image src='https://ss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/823.jpg' width="5rem" height="5rem"></wt-image>
                </wt-circle>
            </li>
        </ul>

组件结构：

<template>
    <div class='wt-circle' :class="className" :style="{'borderRadius':size + 'rem', 'height':size + 'rem', 'minWidth':size + 'rem'}">
        <slot></slot>
    </div>
</template>

代码分析：

props参数：

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

computed 参数：

computed: {
    // 拼接class
    className: function () {
      return this.type;
    }
  }

css代码：

<style lang='less' rel='stylesheet/less' scoped>
 .wt-circle {
     overflow: hidden;
     background: #fff;
     display: inline-block;
     &:active {
        background: rgba(0,0,0,0.1);
      }
     &.primary {
        background: #1BB5F1;
        color:#fff;
        border: 0;
        &:active {
            background: #62c3e9;
        }
    }
    &.danger {
        background: #ef4f4f;
        color:#fff;
        border: 0;
        &:active {
            background: #ff6969;
        }
    }
 }
</style>

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

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