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 就可以。