Vue+Vuetifyで共通のボタンコンポーネントを作成する

ボタンのデザインを統一したり、連打防止の処理をいれたり、ボタンを押したときの共通の処理のためにボタンをコンポーネントにして使ってみる

ボタンコンポーネント（例）

<template>
  <v-btn  
    @click="commonClick"
    :color="color"
    :text="text"
  >
    <slot></slot>
  </v-btn>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {PropType} from "vue";

@Component
export default class ButtonComponent extends Vue{

  @Prop({ type: Function as PropType<() => Promise<unknown>>, required: true })
  onClick!: Function;
  @Prop({ type: String})
  color!: string;
  @Prop({ type: Boolean, default: false })
  text!: boolean;

  public async commonClick() {
    // 共通でしたい処理があれば記載
    await this.onClick();
  }
}
</script>

使い方

<ButtonComponent
  text
  color="success"
  :on-click="clickEvent()">
  ボタン
</ButtonComponent>

v-btnに一つコンポーネントかぶせるだけだけど同じ処理何回も書かなくてすみそう、textと同じようにv-btnにあるやつは全部指定できる
https://vuetifyjs.com/ja/api/v-btn/

全然関係ないけどqiitaのコード挿入した時のシンタックスハイライトよくできてるなぁ