admin管理员组文章数量:1558102
特点
- 拖拽播放
- 桌面歌词
- 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点：
- 确保在nextTick中实例化Draggabilly
- 仅在首次显示时实例化Draggabilly
- 确定可拖动的dom
- modal的嵌套情况
至此封装的drop-modal满足当前项目的所有需求，当然也有不足。
总结
封装drop-modal所涉及的vue核心知识点——$attrs，$slots，$listeners，自定义组件的v-model的还原，计算属性保持数据单向，$nextTick。最终代码
版权声明：本文标题：2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727393070a1112842.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论