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

现在有一个列表,需要给列表的每一行增加右键菜单功能,右键菜单有删除或者编辑功能,截图示例如下。
ElectronVue系列 -- 2. 如何给元素添加右键菜单,编辑或删除该元素_第1张图片

代码示例

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({ ... }))即可

你可能感兴趣的:(Vue学习记录)