Vue 3 ContextMenu组件 - VContextmenu

Vue 3 ContextMenu组件 - VContextmenu
插件名称 VContextmenu
发布时间 2021年5月10日
插件作者 heynext

Vue 3.0的ContextMenu组件。

安装

NPM(推荐)

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

CDN

从unpkg.com/v-contextmenu获取最新版本,然后在页面中导入JavaScript和CSS文件。

<!-- 导入 Vue -->
<script src="https://unpkg.com/vue@next"></script>

<!-- 导入 VContextmenu 组件-->
<script src="https://unpkg.com/v-contextmenu@next/dist/index.js"></script>

<!-- 导入 VContextmenu 样式-->
<link
  rel="stylesheet"
  href="https://unpkg.com/v-contextmenu@next/dist/themes/default.css"
/>
// 丛局
Vue.use(window.contextmenu);

// 或根据需要
const { directive, Contextmenu, ContextmenuItem } = window.contextmenu;

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

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

用法

全局注册

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>

根据需要注册

<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>