【Vue.js】ボタンコンポーネント内でダブルクリック防止処理を実装する

はじめに

Vue.jsでボタンコンポーネントを作成し、ボタンのダブルクリック対策を実装しました。

環境

• Vue.js 3.4.21
• Composition API

サンプルコード

Vue SFC Playgroundで試せます。

呼び出し側（親）

App.vue

<script setup>
import { ref } from 'vue';
import Button from './Button.vue';

const buttonRef = ref();

const handleButtonClick = () => {
  // ボタンクリック時の処理をここに書く
  // 仮の処理として、setTimeoutで0.5秒立ってからdisabled解除する
  setTimeout(() => {
    buttonRef.value.setDisabled(false);
  }, 500)
};
</script>

<template>
  <div>
    <Button
      @click="handleButtonClick()"
      ref="buttonRef"
    >
      ボタン
    </Button>
  </div>
</template>

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

Button.vue

<script setup>
import { ref } from 'vue';

const isDisabled = ref(false);

async function setDisabled(value) {
  isDisabled.value = value
}

defineExpose({ setDisabled });
</script>

<template>
  <button
    @click="setDisabled(true)"
    :disabled="isDisabled"
    ><slot /></button>
</template>

補足

「Vue.js3では子コンポーネントのルートのネイティブイベントをフォールスルーしてくれる挙動」であるため、子コンポーネントで@clickに指定したメソッドが呼ばれた時、親コンポーネントの@clickに指定したメソッドも実行してくれるようです。
つまり、わざわざemitで親のメソッドを呼ぶ必要はないようです。

終わりに

複数のボタンコンポーネントに対して実装する方法については別途記事を作成しました。

参考