[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ただいまコメントを受けつけておりません。
やることとしては以下。
適当な要素を使ってメニューっぽい 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
(説明) を設定し、右クリックされた直後は表示し、メニューの外やメニューのいずれかの項目をクリックした際に消すように設定する。
ただいまコメントを受けつけておりません。