Vue 快速实现右键菜单，懒人的福音

前端阿飞V

已于 2022-10-31 08:56:45 修改

阅读量1.3k

点赞数 3

文章标签： vue.js javascript elementui

于 2022-10-31 08:54:20 首次发布

本文链接：https://blog.csdn.net/m0_55357295/article/details/127608626

版权

高效实现需求，避免重复造轮子。今天给大家分享的是，如何在最短的时候内实现右键菜单。方法也很简单，一个插件就可以搞定，话不多说，上效果图：

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

安装

npm install vue-contextmenujs

或

yarn add vue-contextmenujs

使用

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

代码实现

以element-ui图标为例实现右键菜单，图标会为被渲染为<i class="icon"></i>，代码如下：

<template>
  <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
import Vue from 'vue'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
export default {
     
  methods: {
     
    onContextmenu(event) {
     
      this.$contextmenu({