vue中自定义右键菜单插件_vue.js_

npm i vue-context -S

import Vue from 'vue';  import VueContext from 'vue-context';    new Vue({    components: {      VueContext    },

<div>      <p @contextmenu.prevent="$refs.menu.open">          Right click on me      </p>      </div>

<span @contextmenu.prevent="$refs.menu.open($event, {level: 'L0', or_gid:1, parentId:3})">

<vue-context ref="menu">        <li  @click.prevent=“”></li>  </vue-context>

<vue-context ref="menu"      :close-on-click="closeOnClick"      :close-on-scroll="closeOnScroll"     :lazy="lazy"     :role="role"     :tag="tag"     :item-selector="itemSelector"  >  <li>      <a class="custom-item-class">Option 1</a>  </li>  <li>      <a class="custom-item-class">Option 2</a>  </li>  </vue-context>  // data里面的数据  data () {    return {        // when set to true, the context  menu will close when clicked on        closeOnClick: true,          // when set to true, the context  menu will close when the window is scrolled        closeOnScroll: true,          // When false, the context menu is shown via v-show and will always be present in the DOM        lazy: false,          // The `role` attribute on the menu. Recommended to stay as `menu`        role: 'menu',          // The root html tag of the menu. Recommended to stay as `ul`        tag: 'ul',          // This is how the component is able to find each menu item. Useful if you use non-recommended markup        itemSelector: ['.custom-item-class']    };  }