Vue3 ライブラリ「v-contextmenu@next」を使用して右クリックメニューを実装する

作成日 2022.02.08
Vue.js
Vue3

ライブラリ「v-contextmenu@next」を使用して、右クリックメニューを実装することが可能です。ここでは、v-contextmenu@nextを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. Vue3環境構築
3. v-contextmenu@nextインストール
4. v-contextmenu@next使い方
5. 起動

環境

OS windows10 64bit
vue 3.0.0
node v14.17.0
yarn 1.22.10
@vue/cli 4.5.9

Vue3環境をwindowsに構築する

Vue3環境構築

vue-cliを使用して構築してます。

## @vue/cliインストール
npm install -g @vue/cli

## 初期化
npm init

## upgrade
vue upgrade --next

## vueappというプロジェクトを作成
vue create vueapp

## vue 3を選択
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
> Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

## 移動
cd vueapp

v-contextmenu@nextインストール

yarnを使用して、インストールします。

yarn add v-contextmenu@next

yarnがインストールされていない場合は、以下のコマンドでインストール可能です。

npm install -g yarn

v-contextmenu@next使い方

src配下のApp.vueを下記のように編集します。

<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>Menu Item 1</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 2</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu>right click here</div>
</template>

<script>
import { directive, Contextmenu, ContextmenuItem } from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

export default {
  name: "App",
  directives: {
    contextmenu: directive,
  },
  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }
};
</script>

<style>
#app {
  margin: 0 auto;
  margin-top: 300px;
  min-height: 100vh;
  width: 500px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>