Vue组件开发系列之Button组件

一个按钮组件

微信截图_20190807212154.png

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

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

基本用法：

<wt-button title="small" icon="icon-service"  size="small"></wt-button>
           <wt-button title="normal" icon="icon-store"  size="normal"></wt-button>
           <wt-button title="large"  size="large"></wt-button>
           <wt-button title="small"  size="small" type="primary"></wt-button>
           <wt-button title="normal"  size="normal" type="danger"></wt-button>
           <wt-button title="large" icon="icon-store"  size="large" type="primary"></wt-button>
           <wt-button title="large"  size="large" type="danger"></wt-button>

组件结构：

<template>
        <div class="wt-button" :class="className()">
          <i :class="icon" v-if="icon"></i>
          {{title}}
          </div>
</template>

代码分析：

props参数：

props: {
    title: {
      type: String,
      default: () => {
        return 'button';
      }
    },
    icon: {
      type: String,
      default: () => {
        return '';
      }
    },
    type: {
      type: String,
      default: () => {
        return 'default';
      }
    },
    size: {
      type: String,
      default: () => {
        return 'normal';
      }
    },
    border: {
      type: String,
      default: () => {
        return undefined;
      }
    }
  }

methods方法：

methods: {
    // 拼接class
    className () {
      return this.type + ' ' + this.size + ' ' + (this.border !== undefined ? 'border' : '');
    }
  }

css代码：

<style lang="less" rel="stylesheet/less" scoped>
.wt-button {
        background: #fff;
        color: #333;
        text-align: center;
        border-radius: 0.2rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #eee;
        i {
          margin: 0 0.2rem;
        }
        &:active {
          background: #eee;
        }
        &.primary {
            background: #40cfa0;
            color:#fff;
            border: 0;
            &:active {
              background: #62c3e9;
            }
        }
        &.danger {
            background: #ef4f4f;
            color:#fff;
            border: 0;
            &:active {
              background: #ff6969;
            }
        }
        &.normal {
            height: 2rem;
            line-height: 2rem;
            font-size: 0.8rem;
            width: 50%;
        }
        &.small {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 0.7rem;
            width: 30%;
        }
        &.large {
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 0.9rem;
            width: 100%;
        }
        &.border {
          border: 1px solid #eee;
        }
}
</style>

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

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