手摸手带您打造Electron + Vue笔记应用（六）

2023-10-28 16:53:50

手摸手Electron + Vue实战教程（六）：打造笔记应用的右键菜单

在上一节中，我们已经完成了笔记的新增和编辑功能，并实现了防抖和节流。本节，我们将继续完善笔记应用，重点讲解如何实现右键菜单的功能，以便在应用中实现笔记的删除操作。

1. 初始化右键菜单

在Electron + Vue应用中，右键菜单的初始化通常在mounted()钩子函数中进行。这里，我们将在mounted()钩子函数中添加如下代码：

mounted() {
  // 创建右键菜单模板
  const contextMenuTemplate = [
    {
      label: '删除',
      click: () => {
        // 在这里添加删除笔记的逻辑
      },
    },
  ];

  // 创建右键菜单
  this.contextMenu = Menu.buildFromTemplate(contextMenuTemplate);

  // 为笔记列表元素添加右键菜单事件监听器
  this.$refs.notesList.addEventListener('contextmenu', (event) => {
    // 防止浏览器默认右键菜单弹出
    event.preventDefault();

    // 显示右键菜单
    this.contextMenu.popup({
      window: remote.getCurrentWindow(),
    });
  });
}

2. 删除笔记的逻辑

当用户在笔记列表中右键点击某条笔记时，右键菜单中的“删除”选项将会触发click事件。在click事件处理函数中，我们需要添加删除笔记的逻辑。这里，我们假设this.notes是一个包含所有笔记数据的数组，并且我们已经定义了一个deleteNote()方法来删除笔记。那么，我们可以这样实现删除笔记的逻辑：

// 删除笔记的逻辑
deleteNote(noteId) {
  // 从notes数组中删除笔记
  this.notes = this.notes.filter((note) => note.id !== noteId);

  // 持久化数据（例如，将笔记数据保存到本地存储或数据库中）
}