経緯
先日Undo/Redo機能の実装をする機会がありました。
ついでにショートカットキーで実装できないものかChatGPT 4oに聞いたところ教えてくれたので備忘録として残します。
実装
<script setup>
import { onMounted } from "vue";
// キーボードショートカットのハンドラー
// ※undo(), redo()の中身の処理は省略
const handleKeydown = (e) => {
if (e.ctrlKey || e.metaKey) {
if (e.key === 'z') {
undo(); // Ctrl+Z (Undo)
} else if (e.key === 'Z') {
redo(); // Ctrl+Shift+Z (Redo)
}
e.preventDefault(); // デフォルトの動作を無効化
}
};
// イベントリスナーを登録する
onMounted(() => {
window.addEventListener('keydown', handleKeydown);
});
</script>