Skip to content

Latest commit

 

History

History
171 lines (121 loc) · 3.82 KB

README_EN.md

File metadata and controls

171 lines (121 loc) · 3.82 KB
Raw

WIP! See https://github.com/CyberNika/v-contextmenu/blob/2.x/docs/usage.md for Vue 2.0

v-contextmenu

NPM version NPM download NPM version License Node version

NPM

ContextMenu component for Vue 3.0.

English | 简体中文

Installation

NPM (Recommend)

$ npm i -S v-contextmenu # yarn add v-contextmenu

CDN

Get the latest version from unpkg.com/v-contextmenu, and then import JavaScript and CSS file in your page.

<!-- import Vue -->
<script src="https://unpkg.com/vue"></script>

<!-- import VContextmenu component -->
<script src="https://unpkg.com/v-contextmenu/dist/index.js"></script>

<!-- import VContextmenu styles -->
<link
  rel="stylesheet"
  href="https://unpkg.com/v-contextmenu/dist/themes/default.css"
/>
// global
Vue.use(window.contextmenu);

// or as needed
const { directive, Contextmenu, ContextmenuItem } = window.contextmenu;

export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  },
};

🏖 Gallery

Go online examples

gallery

🎏 Usage

Global register

import contextmenu from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

Vue.use(contextmenu);
<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>

Register as needed

<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 {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }
}
</script>

See online site & document for more details.

🎨 Theme

Default

v-contextmenu/dist/themes/default.css

default

Bright

v-contextmenu/dist/themes/bright.css

bright

Dark

v-contextmenu/dist/themes/dark.css

dark

🛠 Develop

$ pnpm install # install dependencies
$ pnpm dev # start dev server

🤖 Build

$ pnpm build # Build for npm
$ pnpm build:site # Build for site

🛎 Changelog

See releases