ContextMenu (右クリックメニュー) プラグインを Vue.js でイチから作成する
Vue.jsのコンテキストメニュー（右クリックメニュー）プラグインを0から作成する場合、次の手順に従って操作できます。
まず、新しいVueプラグインを作成しましょう。Vueのプラグインでは、グローバルなディレクティブ、コンポーネント、プロトタイプメソッドを定義できます。
// contextMenu.js
const ContextMenuPlugin = {
install(Vue) {
// 在这里编写你的插件代码
}
}
export default ContextMenuPlugin;
２．全般的な指令を登録する: プラグインのインストール方法において、右クリックメニューを起動するための全般的な指令を登録する
install(Vue) {
Vue.directive(‘contextmenu’, {
bind(el, binding) {
el.addEventListener(‘contextmenu’, (event) => {
event.preventDefault();
binding.value(event);
});
}
});
}
3. メニューコンポーネントの作成：渡されたデータに基づいて右クリックメニューをレンダリングするメニューコンポーネントを定義する。
<!-- 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) {
// 处理菜单项点击事件
}
}
}
</script>
<style scoped>
.context-menu {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
</style>
全局ディレクティブのbindメソッド内で、受け取ったデータを元にメニューコンポーネントのインスタンスを作成します。
install(Vue) {
Vue.directive(‘contextmenu’, {
bind(el, binding) {
el.addEventListener(‘contextmenu’, (event) => {
event.preventDefault();
const menuItems = [
{ id: 1, text: ‘菜单项1’ },
{ id: 2, text: ‘菜单项2’ },
{ id: 3, text: ‘菜单项3’ }
];
const contextMenu = new Vue({
render: h => h(ContextMenu, {
props: {
items: menuItems,
posX: event.clientX,
posY: event.clientY
}
})
}).$mount();
document.body.appendChild(contextMenu.$el);
});
}
});
}
プラグインを利用する: Vue のアプリケーションにカスタムの右クリックメニュープラグインを使用します。
import ContextMenuPlugin from './contextMenu.js';
Vue.use(ContextMenuPlugin);
これで、ContextMenu（コンテキストメニュー）プラグインを 0 から作成することができました。ユーザーが指定した要素を右クリックすると、カスタマイズした右クリックメニューが表示されます。必要に応じてプラグインをさらに拡張し、より多くの機能やカスタマイズオプションを追加できます。
