手摸手Electron + Vue实战教程（六）

是阿标吖
4,363 阅读6分钟

系列文章：

❝

断更了一个多月了，身体病了，又在备考，说多都是泪，对不住大家了……

❞

截止上一篇已经完成了笔记的新增和编辑保存了，防抖节流也做了。这一节我们就来开发左侧笔记列表的右键菜单了，可以看到我们新增和编辑都有了，但是却还没有删除的功能，参考我们的原型图（有道云笔记），删除功能就隐藏在右键菜单列表中：

有道云笔记右键菜单
有道云笔记右键菜单

1 遗留 bug

那啥，不知道大家有没有发现上一篇有一个 bug，开始之前还是先处理一个 遗留bug 吧，具体请看下图：

首次新建笔记报错
首次新建笔记报错

具体表现为当我们新建第一篇笔记的时候，会报错 TypeError: Cannot read property 'title' of undefined，可是明明我们已经在data中定义了为什么还 undefined ？

async init() {
  await this.getFileList()
  const [firstFileItem] = this.fileList
  this.fileItem = firstFileItem
  this.activeIndex = 0
}

其实关键就在于我们 init() 方法初始化那里了，在inti()中我们是直接将获取到的笔记列表第一项赋值给当前的this.fileItem，那么当笔记列表为空的时候，赋值后会发生什么呢？firstFileItem会是 undefined，最后this.fileItem也变成 undefined 了，对象this.fileItem中的title字段也就不用我说了……😔

找到原因了，那么解决方案自然也就随之而来了，只要添加一行代码就能完美解决这个报错问题了：

async init() {
  await this.getFileList()
  if (this.fileList.length === 0) return
  const [firstFileItem] = this.fileList
  this.fileItem = firstFileItem
}

即在inti()初始化方法中，添加一行判断，当获取到笔记列表数据后，如果笔记列表this.fileList为空的时候（即长度等于 0），则直接 return 掉，不需要为this.fileItem重新赋值。😆

2 右键菜单展示

有道云笔记右键菜单动态展示
有道云笔记右键菜单动态展示

我们再来细看一下有道云笔记的右键菜单的展示体验，可以明显看到，在不同的位置右键，菜单也就在不一样的地方出现，也就是说右键菜单的位置是不固定（但是菜单左上角一定在当前选中的笔记内），所以菜单的定位值top和left是不能写死的，只能是通过动态计算得出。从而我们可以得出大概流程就是：

  • 右侧菜单使用ul列表展示
  • 使用v-if控制菜单的显示隐藏
  • 使用鼠标右键事件contextmenu，计算菜单的定位

有了方案流程，就直接开干吧！

2.1 列表展示

我们右键菜单是在FileList组件中的，我们就直接改造FileList组件即可。😌

<div class="filelist-container">
  <!-- el-scrollba 组件内容已省略 -->
  <ul v-if="visible" :style="{ left: `${left}px`, top: `${top}px` }" class="contextmenu">
    <slot name="menu"></slot>
  </ul>
</div>

// 菜单列表样式
.contextmenu {
  position: absolute;
  margin: 0;
  padding: 5px 0;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  list-style-type: none;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  z-index: 3000;
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      color: #66b1ff;
      background: #ecf5ff;
    }
  }
}

看上面代码，我们新建一个菜单列表ul和el-scrollbar组件同级，再用一个 div 标签包裹起来，菜单的定位直接使用style行内样式控制。

  • visible变量是控制菜单的显示与隐藏
  • left变量是控制菜单的左侧定位
  • top变量是控制菜单的顶部定位

这里我们使用了vue的具名插槽，即v-slot指令，具名其实就是给插槽起个名字（简单粗暴的理解，哈哈哈~），还不理解的话请自行参考 vue 官网解释吧。😅

可能有人会问：我们现在就两三个菜单，直接写两三个li将事件抛出去就好了，搞什么插槽呢？咋一听没毛病，我们现在确实只有两三个菜单，那么后面如果我们再新增两三个菜单呢？再新增十个菜单呢？是不是一直要改FileList组件，不断地将菜单事件抛出去，就问你怕不怕？而使用插槽，我们就可以杜绝此种状况，而且从组件的设计角度来说，这里也应该使用插槽会更好一点，不仅是便于后期维护，也能将业务代码抽离出来。组件归组件，业务代码归业务代码，尽可能的不要将两者糅杂混在一起，当然这也是个人建议，有更好想法的请给我留言，大家一起学习一起进步~~😂😂😂

2.2 右键逻辑

在笔记列表中添加鼠标右键事件contextmenu，将当前笔记对象fileTtem、index和$event传递到函数openMenu，传递index是为了动态切换当前高亮选中的笔记，这里也使用到了 vue 事件绑定的语法糖.prevent。点击openMenu就是我们执行右键事件的所有逻辑了：

  • 计算右键菜单的位置
  • 控制菜单展示出来
  • $emit将笔记数据传回父组件执行相关业务

函数openMenu的具体代码为：

openMenu(fileItem, index, e) {
  const menuMinWidth = 105
  const { offsetWidth } = this.$el // 获取容器的宽
  const maxLeft = offsetWidth - menuMinWidth // 左侧边界
  const left = e.clientX + 15 // 15 => margin right

  this.left = left > maxLeft ? maxLeft : left
  this.top = e.clientY
  this.visible = true
  this.$emit('update:active', index)
  this.$emit('update:selectedFile', fileItem) // 将当前右键选中的文件返回父组件
}

menuMinWidth是为了计算防止菜单超出笔记列表的右侧。

还需要在props中添加selectedFile: Object，到时候父子组件通过该变量传递当前右键菜单所选中的笔记信息。

菜单展示的逻辑我们写完了，但是关闭的逻辑我们要怎么写呢，正常的右键菜单都是有两个场景的关闭逻辑，一是当我们点击执行其中一个菜单选择的时候则关闭菜单层，二是当我点击其它任意位置的时候也执行关闭菜单层。非常常见的操作，这点相信大家都不会有什么疑问，那么我们需要怎么去代码实现呢？

我们先来写一个关闭菜单的方法，方法很简单，只要将visible设置为false即可：

closeMenu() {
  this.visible = false
}

然后我们通过 watch 监听变量visible，根据visible来动态添加/移除事件监听方法，visible为true时添加点击事件监听，visible为false时移除点击事件监听，具体看下面代码：

watch: {
  visible(value) {
    if (value) {
      document.body.addEventListener('click', this.closeMenu)
    } else {
      document.body.removeEventListener('click', this.closeMenu)
    }
  }
}

至此，FileList组件的右键菜单就算改造完毕了。

2.3 业务应用

组件搞完了，那就开始我们的实际业务使用了。我们的组件使用了具名插槽，直接使用v-slot即可：

<file-list :fileList="fileList" :active.sync="activeIndex" :selectedFile.sync="selectedFile">
  <template v-slot:menu>
    <li>置顶</li>
    <li>删除</li>
  </template>
</file-list>

data中定义selectedFile对象，当右键菜单执行的时候，对应的笔记信息会传递过来，我们就可以操作我们具体的业务逻辑了：

data() {
  return {
    selectedFile: {} // 右键菜单选中的文件数据
  }
}

写完这一步再来看看我们的客户端页面，是不是菜单已经出来了呀 😄😄😄

右键菜单展示
右键菜单展示

3 右键菜单-删除

删除笔记的逻辑也很简单，有道云笔记是直接就删除的，我们这里做个小优化，加上一个二次确认的操作，防止误删除，毕竟我们现在数据没有存云上，删除了就真的没了……添加fileDetele方法，根据子组件传回来的selectedFile对象拿到数据id，调用nedb api 执行：

fileDelete() {
  this.$confirm('此操作将永久删除该笔记, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const { _id } = this.selectedFile
      this.$db.markdown
        .remove({ _id })
        .then(num => {
          this.$message.success(`删除了${num}个项目`)
          this.init()
        })
        .catch(() => {
          this.$message.error('删除失败')
        })
    })
    .catch(() => {})
}

this.init()，删除成功后重新获取列表数据，初始化一下即可。

删除笔记效果图
删除笔记效果图

4 右键菜单-置顶

置顶这个功能其实也不复杂，正常情况下我们新编辑后的笔记都会展示在最顶部，但是如果你置顶了该笔记，那么列表顶部会优先展示你所置顶的笔记，主要麻烦的就是根据是否置顶的字段来动态切换列表的展示样式（图标 icon）。

首先我们需要在新建笔记的时候给它设置一个默认不置顶的字段isTop:

然后在FileList组件组件中修改一下列表展示 dom，简单添加一行代码<p class="is-top" v-if="item.isTop"><i class="el-icon-download" /></p>：

css 样式：

.is-top {
  margin-right: 5px;
  transform: rotate(180deg);
  color: #ced4da;
}

然后当我们获取列表数据的时候，需要优先根据isTop来排序，在函数getFileList()修改：

现在我们就可以在右键菜单中具体写我们置顶操作逻辑了，新增函数handleFileTop()，将数据修改为!isTop，因为我们这个操作既可以置顶，也可以取消置顶，所以直接取反即可：

handleFileTop() {
  const { _id, isTop } = this.selectedFile
  this.$db.markdown.update({ _id }, { $set: { isTop: !isTop } }).then(() => {
    this.init()
  })
}

来来来，直接看我们最后的效果图：

置顶操作效果图
置顶操作效果图

5 小结

这一篇章的所有功能新增与修改只涉及到了两个文件：

  1. vue-electron-note/src/views/Home.vue
  2. vue-electron-note/src/components/FileList/index.vue

通篇代码我就不贴出来了，有兴趣的同学可以直接去 GitHub 上看看，有任何问题都可以直接给我留言。如果你觉得还不错，可以顺手给我一个Star呀，那样就……😌😌😌

项目 github 地址：github.com/mengdebiao/…

本文使用 mdnice 排版

avatar
文章
阅读
粉丝