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>