5.改進 button 組件的樣式-2

結合前面的知識，我們讓 my-button 元素支持 size 屬性

我們用 font-size 字體大小來控制 button 按鈕的大小

默認：14px；

min： 10px；

max：18px；

注意 chrome 瀏覽器默認 font-size 12px

<template>
  <button :class="size ? size + '-button' : 'button'">
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: 'my-button',
  props: ['size']
}
</script>
<style>
  .button {
    font-size: 14px;
  }
  .min-button {
    -webkit-transform: scale(0.83);
    font-size: 10px;
  }

  .max-button {
    font-size: 18px;
  }
</style>

# 知識點：

• chrome瀏覽器不支持 CSS 12px 以下的字體，我們使用Webkit 的內核的私有 CSS 屬性 -webkit-transform，用來縮放可以定義寬高的元素。

在 App.vue 使用 my-button

<my-button>click me</my-button>
<my-button size="min">click me</my-button>
<my-button size="max">click me</my-button>