文章转载自：https://www.jianshu.com/p/e71...，感谢文章作者，顺利完成文件夹选择功能1．第一种方法，纯js代码的原理是：利用input标签的文件类别打开文件选择对话框，通过input标签的change事件返回选中的文件。为了每次都更新选中的文件，在input对象用完后，每次从html中移除，下次使用时重新创建添加到html中。代码如下：/***按钮事件实现函数*原理：利用input标签的文件类别打开文件选择对话框*通过change事件返回选中的文件。为了每次更新选择的文件，*输入对象用完后，每次都会从html中移除，下次使用时重新创建添加到html中*/btnClickFun:function(dir){//创建输入标签varinputObj=document.createElement('input')//设置属性inputObj.setAttribute('id','_ef');inputObj.setAttribute('类型','文件');inputObj.setAttribute("style",'visibility:hidden');if(dir){//如果要选择路径，添加下面两个属性inputObj.setAttribute('webkitdirectory',"");inputObj.setAttribute)("';}//添加DOCUMENT.BODY.APPENDCHILD(inputObj);//添加事件监听器inputObj.addeventristener("Change",this.UpdatePath);打开文件选择器input的change事件响应tagupdatePath:function(){varinputObj=document.getElementById("_ef");varfiles=inputobj.文件；console.log(files)Try{if(FILES.Length>1){Alert('当前只支持选择一个文件')}else{switch(this.btntype){case'store'://临时值变量被赋予输出路径this.outpath=files[0].path;休息;case'add'://添加文件操作this.filepath=FILES[0].path;if(this.filePath){Alert("添加成功")}Break;default:Break;}//移除事件监听器inputObj.removeEventristener("Change",function(){});.body.removeChild(输入对象);}catch(error){alert(error)}}，btnClickFun函数创建并设置input标签属性和监听器，函数updatePath是change事件监听器的回调函数，通过input的files属性选择标记对象的文件名。2、第二种方法，electron首先在子进程中引入ipcRenderer模块，import{ipcRenderer}from'electron'使用该模块向主进程发送“open-directory-dialog”消息，配置参数为"openDirectory"或"openFile"，并将主进程返回的消息"selectedItem"的回调函数设置为getPath,//按钮点击事件btnClick:function(type){this.btntype=type;//判断点击事件从哪个按钮发送switch(type){Case'store'://选择存储路径//this.btnclICKFUN2.;ipcrenderer.send('Open-Directory-Dialog','OpenDirectory');ipcrenderer.on;休息;case'add'://添加文件//this.btnClickFun(false);ipcRenderer.send('open-directory-dialog','openFile');ipcRenderer.on('selectedItem',this.getPath);休息;case'remove':this.deleteItem();休息;休息;默认值：BREAK；}}，Getpath：函数（E，PATH）{console.log（路径）if（path==null）{alert（'请选择文件/文件夹'）}else{switch（thisthis.btntype){case'store'://临时变量的值赋给输出路径this.outpath=Path;休息;case'add'://添加文件操作this.filepath=PATH;if(this.addfile(this.addfile.filepath){Alert("AddSuccess")}break;default:break;}}}，然后在主进程中设置子进程的消息监听，引入对话框模块图像{dialog}来自'Electron'/////绑定打开的对话框事件ipcMain.on('open-directory-dialog',function(event,p){dialog.showOpenDialog({properties:[p]},function(files){if(files){//ifselected//sendtheselectedobjecttothechildprocessevent.sender.send('selectedItem',files[0])}})});这样就可以完成选择文件/文件夹的操作了dialog通过change事件返回选择的文件。为了每次都更新选中的文件，在input对象用完后，每次都会从html中移除，下次使用时重新创建并添加到html中，默认打开文件夹。如果需要选择文件，需要在调用处配置属性dir='file'。属性caption显示按钮的文本信息。调用成功后，会向父进程发送一个'btnSelectItem'消息，返回选中文件的完整路径。这里参考了vue官方文档的《将原生事件绑定到组件》章节。解决父组件调用时子组件按钮无响应的问题。将本机事件绑定到组件很多时候，您可能想直接在组件的根元素上监听本机事件。此时，您可以使用v-on的.native修饰符：这有时很有用，但当您尝试听一个非常具体的元素（如.）时，这不是一个好主意。例如上面的组件可能已经重构如下，所以根元素实际上是一个元素：{{label}}此时，父级的.native监听器将静静地失败。它不会产生任何错误，但不会像您预期的那样调用onFocus处理程序。为了解决这个问题，Vue提供了一个$listeners属性，它是一个包含所有作用于这个组件的监听器的对象。例如：{focus:function(event){/.../}input:function(value){/.../},}有了这个$listeners属性，就可以匹配v-on="$listeners"点此组件的特定子元素的所有事件侦听器。对于那些你也想使用v-model的组件，为这些监听器创建一个计算属性通常很有用，比如下面的inputListeners：Vue.component('base-input',{inheritAttrs:false,props:['label','value'],computed:{inputListeners:function(){varvm=this//Object.assign将所有的对象合并成一个新的对象returnObject.assign({},//我们添加所有的监听器来自parentthis.$listeners,//然后我们添加自定义监听器，//或在这里覆盖一些监听器的行为{//以确保组件与v-model一起工作input:function(event){vm.$emit('input',event.target.value)}}})}},template:{{label}}})现在该组件是一个完全透明的包装器，这意味着它的使用方式与普通元素完全一样：所有相同的属性和侦听器将工作。4.第二种方法实现的vue组件Electron的ipcRenderer模块实现的文件选择器默认打开文件夹。如果需要选择文件，需要在调用处配置属性dir='file'。属性caption显示按钮的文本信息。调用成功后，会向父进程发送'btnSelectItem'消息，返回选中文件的完整路径
