阅读 2646

手摸手Electron + Vue实战教程(六)

系列文章:

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

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

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

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 右键菜单展示

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

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

  • 右侧菜单使用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;
    }
  }
}
复制代码

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

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

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

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

2.2 右键逻辑

在笔记列表中添加鼠标右键事件contextmenu,将当前笔记对象fileTtemindex$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来动态添加/移除事件监听方法,visibletrue时添加点击事件监听,visiblefalse时移除点击事件监听,具体看下面代码:

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 排版

文章分类
前端
文章标签