Vue 中使用右键菜单

目录

• 一、前言
• 二、组件对比
• 三、使用

一、前言

老的项目中有使用右键菜单，在拿过来用的时候有些问题，又找了些新的组件进行对比，在这里记录下。

二、组件对比

v-contextmenu ：这个组件是原型项目中使用的，在拿过来的使用的时候一直安装不成功，提示需要的依赖不能正确安装，于是就放弃了这个（GitHub 地址）；

vue-contextmenu：这个组件安装成功了，安装使用说明一直不成功，最后也放弃了（GitHub 地址）；

vue-context-menu：最后选择这个，使用也较简单（GitHub 地址），不过这个有几年没有维护了；

三、使用

1、安装：

npm install vue-context-menu --save

2、在项目中使用

<template>
    <div @contextmenu.prevent="onContextShow()" />
    <Contextmenu ref="contextmenu" class="context-menu">
        <li v-show="contextmenuList.add" @click="addGroup(0)">添加</li>
        <li v-show="contextmenuList.edit" @click="editGroup">修改</li>
        <li v-show="contextmenuList.delete" @click="removeGroup">删除</li>
    </Contextmenu>
</template>

<script>
// 直接在组件中引入使用
import Contextmenu from 'vue-context-menu'

export default {
   components: {
     Contextmenu
   },
   methods: {
        onContextShow(data) {
          this.$refs.contextmenu.open()
        },
    }
}
</script>
<style lang="scss">
  .context-menu {
    .ctx-menu {
      min-width: 65px;
      font-size: 14px;

      li {
        padding: 5px 14px;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: #409eff;
        }
      }
    }
  }
</style>

上面是整个代码的使用，在使用的过程中可以多层级，直接使用 li=》ul=》li 这样进行嵌套。

样式就是要嵌套下组件的 class 就可以。