Vue组件开发系列之Button组件

一个按钮组件

微信截图_20190807212154.png

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

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

基本用法：

组件结构：

代码分析：

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代码：

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

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