按钮和按钮组的修改和增强

前几天封装了按钮和按钮组组件，element里面的按钮组不能统一设置其中的按钮大小，既然是自己封装，肯定要实现这个功能。

步骤1

// 情景1
<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>
// 情景2
<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>

综上代码可见，bulma 是可以支持从按钮组统一设置其中按钮大小的，而且其中的按钮还可以单独设置大小，所以样式方面我们不用做任何改动了。

步骤2-按钮

// 之前的 size，默认是 normal，这个会影响按钮组的设置，去掉
props: {
    size: {
      type: String,
      default: "normal"
    },
}
// 增加一个逻辑判断，如果属性值为空，就不加这个样式了
if (this.$props[key]) {
  classArr.push("is-" + this.$props[key]);
}

步骤3-按钮组

// 推荐如下的用法，把之前的都修改一下吧
<div class="buttons" :class="[size ? 'are-' + size : '', {'has-addons': addons}]">
    <slot></slot>
</div>

最后

// size: small | normal | medium | large 
<ButtonGroup size="small">
  <Button @click="visible=true" type="primary">新增</Button>
  <Button type="warning">修改</Button>
  <Button type="danger">删除</Button>
</ButtonGroup>

完成后告诉我一下