7.补充”确认“按钮样式

1. "确认"按钮样式

前面添加了取消按钮的样式，同时我们将其设置为默认样式，class 属性为 button 的样式

现在添加确认按钮的样式，设定其 class 属性为 primary-button

修改了文本颜色和背景颜色

.primary-button {
  background-color: #409EFF;
  color: #FFF;
}

2. 添加 class

之前我们使用 :class 绑定内部样式及使用了三元运算符将 color 和 size 应用于 button 的class

我们将 color 和 size 属性用 type 属性替代

也就是当我们使用 my-button 元素标签时可以如下使用

<my-button type="primary">确认</my-button>

先在组件文件新增 type 属性，type 设置为类型设置为 String，也就是在使用 my-button 元素指定 type 的值时其会验证是否为 String 类型，default 是给 type 指定默认值。 

<script>
export default {
  name: 'my-button',
  props: {
    type: {
      type: String,
      default: ''
    }
  }
}
</script>

然后在 button 标签内绑定 class

<button class="button" :class="[type ? type + '-button' : '']">
  <slot></slot>
</button>

3. 使用组件

在 App.vue 文件中使用 my-button 组件

<div id="app">
  <my-button>取消</my-button>
  <my-button type="primary">确认</my-button>
</div>