ElectronVue系列 -- 2. 如何给元素添加右键菜单，编辑或删除该元素

现在有一个列表，需要给列表的每一行增加右键菜单功能，右键菜单有删除或者编辑功能，截图示例如下。

代码示例

1. 给元素添加右键事件监听

@contextmenu="rightClick"添加右键事件监听

<b-list-group-item
    v-for="(item, index) in itemList"
    :key="item.id"
    @contextmenu="rightClick(item.id)"
 >
    {{ item.nickname }}
</b-list-group-item>

2. 渲染右键菜单，并展示

    // 右键方法触发
    rightClick: function(id) {
      const that = this
      // 需要用到 electron
      const { remote } = require('electron')
      const { Menu, MenuItem } = remote
      // 右键菜单
      const menu = new Menu()
      menu.append(new MenuItem({
        label: 'delete',
        click: function() {
          // 执行remove方法，不能直接使用 this.removeItem
          that.removeItem(id)
        }
      }))
      // 第二个菜单
      // menu.append( ... )
      // 展示出来
      menu.popup(remote.getCurrentWindow())
    },

如上，即可给元素添加右键菜单功能。
如果需要右键之后需要多个功能，则继续menu.append(new MenuItem({ ... }))即可