右键菜单组件 demo
npm install @gahing/vcontextmenu # yarn add @gahing/vcontextmenu如果是用 vue-cli3 构建的，可以利用 vue-cli-plugin-contextmenu
vue add contextmenu手动注册：
import ContextMenu from '@gahing/vcontextmenu'
import '@gahing/vcontextmenu/lib/vcontextmenu.css'
Vue.use(ContextMenu)
// or
import { ContextMenu } from '@gahing/vcontextmenu'
import '@gahing/vcontextmenu/lib/vcontextmenu.css'
Vue.component(ContextMenu.name, ContextMenu); // 可以在这里定义自己的组件名<template>
<context-menu
:show="contextMenuVisible"
:offset="contextMenuOffset"
@update:show="show => (contextMenuVisible = show)"
>
<div>复制</div>
<div>粘贴</div>
<div>剪切</div>
</context-menu>
<div @contextmenu="showContextMenu">右键点击此区域</div>
</template>
<script>
export default {
data() {
return {
contextMenuVisible: false,
contextMenuOffset: {
left: 0,
top: 0
},
};
},
methods: {
showContextMenu(e) {
e.preventDefault();
this.contextMenuVisible = true;
this.contextMenuOffset = {
left: e.pageX,
top: e.pageY
};
}
}
};
</script>npm start# 构建demo
npm run build:demo
# 源码打包，生成lib目录
npm run build:lib
# 发布gh-pages
npm run ghpages
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent