前言:
vue3+vite的项目中实现右键事件的神器:@imengyu/vue3-context-menu
实现效果:
使用步骤:
1、安装 npm/cnpm/pnpm/yarn 都可以,装上下面插件
@imengyu/vue3-context-menu
2、main.js中配置引入
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css';
import ContextMenu from '@imengyu/vue3-context-menu';
const app = createApp(App);
app.use(ContextMenu);
3、页面上使用:
template
<ul
v-else
class="list-inlin text-white bg-light p-1 m-2"
style="border-radius: 2px;"
@click="handleDownload()"
@contextmenu.stop="onContextMenu($event)"
>
//因为有其他的点击事件,.stop是必须的,不然冒泡了
...
ts中
<script lang="ts" setup>
import ContextMenu from '@imengyu/vue3-context-menu';
const onContextMenu = (e: MouseEvent) => {
ContextMenu.showContextMenu({
x: e.x,
y: e.y,
items: [
{
label: '转发',
onClick: () => {
forwardingMessage();
},
},
{
label: '引用',
onClick: () => {
alert('引用')
},
},
{
label: '撤回',
onClick: () => {
alert('撤回')
},
},
],
});
};