在add界面显示已选择的歌曲列表(原生js操作dom)
接上一条博客,继续修改main.js中
ipcMain.on('open-music-file',(event,arg)=>{ dialog.showOpenDialog({ properties:['openFile', 'multiSelections'],//打开文件,允许多选 filters:[{name:'Music', extensions:['mp3']}]//文件类型为音乐,只能打开mp3 }, (files) => { //console.log(files) if(files){ event.sender.send('selected-file',files) } }) })
在ad.js中添加监听
let musicFilesPath = [] ipcRenderer.on('selected-file', (event, path) => { if(Array.isArray(path)){ musicFilesPath = path rendererListHTML(musicFilesPath) } })
编辑操作dom的函数
//先引入node提供的path用于从路径中获取文件名 const path = require('path') const rendererListHTML = (pathes) => { const musicList = $('musicList') const musicItemsHTML = pathes.reduce((html, music) => { html += `<li class = "list-group-item">${path.basename(music)}</li>` return html }, '') musicList.innerHTML = `<ul class = "list-group">${musicItemsHTML}</ul>` }