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 (説明) を設定し、右クリックされた直後は表示し、メニューの外やメニューのいずれかの項目をクリックした際に消すように設定する。