プログラムを書こう!

実務や自作アプリ開発で習得した役に立つソフトウェア技術情報を発信するブログ

Vue3のv-onで.{keyalias}修飾子を使用する

この記事は 2023 年 03 月 12 日に投稿しました。

目次

  1. はじめに
  2. Vue3のv-onで.{keyalias}修飾子を使用する
  3. おわりに

1. はじめに

こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue3v-on.{keyalias}修飾子を使用する方法についてです。

目次へ

2.Vue3のv-onで.{keyalias}修飾子を使用する

Vue3v-on.{keyalias}修飾子ですが、 特定のキーでのみハンドラーをトリガーします。

指定できる主な.{keyalias}修飾子は以下の通りです。

keyalias 内容
.enter Enterキー
.tab Tabキー
.delete Deleteキー
.backspace BackSpaceキー
.esc ESCキー
.space Spaceキー
.up 上向き矢印キー
.down 下向き矢印キー
.left 左向き矢印キー
.right 右向き矢印キー
.ctrl Ctrlキー
.alt Altキー
.shift Shiftキー
.meta WindowsキーまたはCommandキー

実装例

<script lang="ts" setup>
/**
 * メッセージボタンがクリックされた時に呼び出されます。
 */
const onClick = () => {
  console.log("Hello world!");
}
</script>

<template>
  <!-- Ctrlキーが押下されている間にクリックされるとイベントハンドラonClickが呼び出されます。 -->
  <button @click.ctrl="onClick">
    メッセージ
  </button>
</template>

リファレンス

Vue3

v-on

目次へ

3. おわりに

v-on.{keyalias}修飾子ですが、公式のドキュメントを見ても指定できる値がわかりませんでした。
そのためググってみましたがわかりませんでしたが、chatGPTで聞いたところ1回で教えてくれました。

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ


私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッド OS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOS モバイルアプリウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ

https://openai.com/blog/chatgpt