2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享

特点

• 拖拽播放
• 桌面歌词
• mini模式
• 自定义托盘右键菜单
• 任务栏缩略图，歌曲操作
• 音频可视化
• 自动/手动检查更新
• Nedb数据库持久化
• 自定义安装路径，安装界面美化
• 浏览器中启动客户端
• Travis CL，AppVeyor自动构建
• 换肤，下载，本地歌曲匹配，网络变化桌面通知，分享歌曲/歌单/MV/视频等到QQ空间
• 登录，私人Fm，歌单，专辑，歌手，排行榜，MV，视频，评论，搜索，用户，动态，粉丝，关注，云盘，收藏…
• 心动模式，歌词微调，下一首播放，追加播放，单曲循环，随机播放，列表循环
• 路由导向，局部刷新，首页栏目调整并持久化…
• …

下载 && 运行

项目地址

点击下载应用。

macOS用户请下载dmg文件，windows用户请下载exe文件，linux用户请下载AppImage文件。
项目当前依赖NeteaseCloudMusicApi,需本地启动该服务并为接口地址添加/api后缀

基于draggabilly封装一个可拖动的对话框

拖动对话框的身影在项目中还是挺常见的，如首页中的栏目调整对话框，收藏歌单等。

然而Ant Design Vue提供的对话框组件并没有提供拖拽的功能，但这一功能在项目中又是不可缺少的，所以只好自己动手丰衣足食。

封装一个drop-modal主要分三步:

• 让drop-modal拥有拥有a-modal的API
• 在drop-modal上实现v-model
• modal首次显示后实例化Draggabilly

$attrs，$slots，$listeners

实现前两步的目的在于让书写drop-modal的语法和a-modal保持基本一致，其中第一步较为简单，新建drop-modal，其模板如下：

<template>
  <a-modal
    v-bind="{...$attrs,...$slots}"
    v-on="$listeners"
  >
    <slot></slot>
  </a-modal>
</template>

实现v-model

通常我们在a-modal上通过v-model绑定一个值，通过修改该值来控制对话框的显示隐藏，就像这样

<a-modal v-model="visible">
  <p>contents</p>
</a-modal>

所以我们也应该在drop-modal实现上实现v-model。如果了解自定义组件的v-model是:value和@input的语法糖，实现起来也不难。

• 首先定义一个props value。为了保持单向数据流.
• 再定义一个计算属性 currentValue，在其get方法中返回value，在set方法中触发自定义事件
• 最后将currentValue绑定在a-modal上即可。核心代码如下：

<a-modal ... v-model="currentValue">
   ...
</a-modal>

computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
}

实例化Draggabilly

最后一步也是最重要的一步，通过watch监听 value ，当值为true时实例一个Draggabilly让modal变成可拖动。这一步需要注意4点：

1. 确保在nextTick中实例化Draggabilly
2. 仅在首次显示时实例化Draggabilly
3. 确定可拖动的dom
4. modal的嵌套情况

至此封装的drop-modal满足当前项目的所有需求，当然也有不足。

总结

封装drop-modal所涉及的vue核心知识点——$attrs，$slots，$listeners，自定义组件的v-model的还原，计算属性保持数据单向，$nextTick。最终代码