簡單好用的自定義右鍵菜單插件

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

具體的相關内容還有很多，因為項目趕的比較急，達到了業務需求就沒有繼續深究，在此貼一下官方連結

官方連結：https://www.npmjs.com/package/vue-context?activeTab=readme