vue中自定義右鍵菜單插件怎么用

今天小編給大家分享一下vue中自定義右鍵菜單插件怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

演示

用法

通過npm安裝插件

npm i vue-context -S

在main.js中引入并注冊

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>

在需要綁定的元素使用@contextmenu.prevent="$refs.menu.open"進行右鍵綁定，在綁定的同時還可以傳入相關的參數 如下：

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

菜單欄部分

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

菜單欄主要是ul>li結構 項目中可以自己來設置樣式

同時vue-context還具有有多個屬性

• closeOnClick 默認值為true 設置成false時鼠標點擊菜單欄將不會自動關閉

• closeOnScroll 默認值為true 設置成false時鼠標點擊菜單欄將不會自動關閉 

<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']
  };
}

以上就是“vue中自定義右鍵菜單插件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。