忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/11    10« 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  »12

Vue で右クリックメニューを出す

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

Vue で右クリックメニューを出す

やることとしては以下。

  1. @click.right のイベントを記載する
  2. それだけだとデフォルトの右クリックメニューも出てしまうので prevent する
  3. 右クリックされた座標のところにメニューを移動させる
  4. メニューを表示させる

右クリックメニューを作る

適当な要素を使ってメニューっぽい html を作る。とりあえずは何もしなくても表示しぱなっしにしておけばよい。

右クリックにイベントをバインド

イベントハンドリング -vue.js にある通り、右クリックへのイベントバインドは簡単である。@click.right="onRightClick" で終わり。イベントのトリガーの詳細を . で繋いで記載できるのは楽であることだなぁ。

デフォルトのイベントを消す

そう難しい話ではなく、preventDefault() (説明) すればいい話である。

methods: {
  onRightClick: function(e){
    // 処理
    event.preventDefault();
  }
}

しかし、そんなことをしなくてもイベントのバインドの際に .prevent を付けてやれば vue が勝手にやってくれる (紹介)。

メニューの位置を決める

イベントの pageX, pageY や offsetX, offsetY を利用して表示位置を計算し、最初に作った右クリックメニューとなる要素をそこに移動させる。右クリックメニューとなる要素の CSS の position を absolute とかにしておき、CSS の left, top をいじって位置を設定する。なんか上手くいかなかったら適当に計算していい感じの位置にする。

表示・非表示をコントロールする

最初に作った要素に v-show (説明) を設定し、右クリックされた直後は表示し、メニューの外やメニューのいずれかの項目をクリックした際に消すように設定する。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R