Vueのボタンをまとめるコンポーネントを作成する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<template>
  <div
      class="buttons"
      :class="{
      'are-small': areSmall,
      'are-medium': areMedium,
      'are-large': areLarge,
      'has-addons': hasAddons,
      'is-centered': isCentered,
      'is-right': isRight,
      }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "BaseButtons",
  props: {
    size: {type: String, default: "medium"},
    alignment: {type: String, default: ""},
    addons: {type: Boolean, default: false}
  },
  computed: {
    areSmall() {
      return 'small'=== this.size
    },
    areMedium() {
      return 'medium'=== this.size
    },
    areLarge() {
      return 'large'=== this.size
    },
    hasAddons() {
      return !!(this.addons)
    },
    isCentered() {
      return 'center'=== this.alignment
    },
    isRight() {
      return 'right'=== this.alignment
    }
  }
}
</script>

<style scoped>

</style>