Vueカスタムカプセル化ボタンコンポーネント

<テンプレート>
  <button class="ボタン省略記号" :class="[サイズ,タイプ]">
    <スロット />
  </ボタン>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ボタン'、
  小道具: {
    サイズ： {
      タイプ: 文字列、
      デフォルト: 'middle'
    },
    タイプ： {
      タイプ: 文字列、
      デフォルト: 'デフォルト'
    }
  }
}
</スクリプト>
<style スコープ lang="less">
。ボタン {
  外観: なし;
  境界線: なし;
  アウトライン: なし;
  背景: #fff;
  テキスト配置: 中央;
  境界線: 1px 透明の実線;
  境界線の半径: 4px;
  カーソル: ポインタ;
}
。大きい {
  幅: 240ピクセル;
  高さ: 50px;
  フォントサイズ: 16px;
}
。真ん中 {
  幅: 180ピクセル;
  高さ: 50px;
  フォントサイズ: 16px;
}
。小さい {
  幅: 100ピクセル;
  高さ: 32px;
  フォントサイズ: 14px;  
}
.ミニ{
  幅: 60ピクセル;
  高さ: 32px;
  フォントサイズ: 14px;  
}
。デフォルト {
  境界線の色: #e4e4e4;
  色: #666;
}
。主要な {
  境界線の色: #27BA9B;
  背景: #27BA9B;;
  色: #fff;
}
。無地 {
  境界線の色:#27BA9B;
  カラー:#27BA9B;;
  背景: 明るくする(#27BA9B;,50%);
}
.グレー{
  境界線の色: #ccc;
  背景: #ccc;;
  色: #fff;
}
</スタイル>

<Button type="primary" style="margin-top:20px;">カスタムボタン名</Button>
<Button type="primary" style="margin-top:20px;">カートに追加</Button>