瑕佷粠闆剁紪鍐欎竴涓猇ue鐨凜ontextMenu锛堝彸閿彍鍗曪級鎻掍欢锛屼綘鍙互鎸夌収浠ヤ笅姝ラ杩涜鎿嶄綔锛?/p>

1. 鍒涘缓涓€涓猇ue鎻掍欢锛氶鍏堬紝鍒涘缓涓€涓柊鐨刅ue鎻掍欢銆備綘鍙互鍦╒ue鐨勬彃浠朵腑瀹氫箟鍏ㄥ眬鎸囦护銆佺粍浠舵垨鍘熷瀷鏂规硶銆?/p>

// contextMenu.js
const ContextMenuPlugin = {
  install(Vue) {
    // 鍦ㄨ繖閲岀紪鍐欎綘鐨勬彃浠朵唬鐮?/p>
  }
}
export default ContextMenuPlugin;

2. 娉ㄥ唽鍏ㄥ眬鎸囦护锛氬湪鎻掍欢鐨刬nstall鏂规硶涓紝娉ㄥ唽涓€涓叏灞€鎸囦护锛岀敤浜庤Е鍙戝彸閿彍鍗曘€?/p>

install(Vue) {
  Vue.directive('contextmenu', {
    bind(el, binding) {
      el.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        binding.value(event);
      });
    }
  });
}

3. 鍒涘缓鑿滃崟缁勪欢锛氬畾涔変竴涓彍鍗曠粍浠讹紝璇ョ粍浠跺皢鏍规嵁浼犲叆鐨勬暟鎹覆鏌撳嚭鍙抽敭鑿滃崟銆?/p>

<!-- ContextMenu.vue -->
<template>
  <div class="context-menu" :style="{ top: posY + 'px', left: posX + 'px' }">
    <ul>
      <li v-for="item in items" :key="item.id" @click="handleItemClick(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    items: Array,
    posX: Number,
    posY: Number
  },
  methods: {
    handleItemClick(item) {
      // 澶勭悊鑿滃崟椤圭偣鍑讳簨浠?/p>
    }
  }
}
</script>
<style scoped>
.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

4. 鍦ㄦ寚浠や腑鍒涘缓鑿滃崟瀹炰緥锛氬湪鍏ㄥ眬鎸囦护鐨刡ind鏂规硶涓紝鏍规嵁浼犲叆鐨勬暟鎹垱寤鸿彍鍗曠粍浠剁殑瀹炰緥銆?/p>

install(Vue) {
  Vue.directive('contextmenu', {
    bind(el, binding) {
      el.addEventListener('contextmenu', (event) => {
        event.preventDefault();
        
        const menuItems = [
          { id: 1, text: '鑿滃崟椤?' },
          { id: 2, text: '鑿滃崟椤?' },
          { id: 3, text: '鑿滃崟椤?' }
        ];
        
        const contextMenu = new Vue({
          render: h => h(ContextMenu, {
            props: {
              items: menuItems,
              posX: event.clientX,
              posY: event.clientY
            }
          })
        }).$mount();
        
        document.body.appendChild(contextMenu.$el);
      });
    }
  });
}

5. 浣跨敤鎻掍欢锛氬湪浣犵殑Vue搴旂敤涓娇鐢ㄨ嚜瀹氫箟鐨勫彸閿彍鍗曟彃浠躲€?/p>

import ContextMenuPlugin from './contextMenu.js';
Vue.use(ContextMenuPlugin);

鐜板湪锛屼綘宸茬粡鎴愬姛鍦颁粠闆剁紪鍐欎簡涓€涓狢ontextMenu锛堝彸閿彍鍗曪級鎻掍欢銆傚綋鐢ㄦ埛鍙抽敭鐐瑰嚮鎸囧畾鍏冪礌鏃讹紝灏嗕細鏄剧ず鍑鸿嚜瀹氫箟鐨勫彸閿彍鍗曘€備綘鍙互鏍规嵁闇€瑕佽繘涓€姝ユ墿灞曡鎻掍欢锛屾坊鍔犳洿澶氬姛鑳藉拰鑷畾涔夐€夐」銆?/p>