文章转载自：https://www.jianshu.com/p/e71…，感谢文章作者，成功完成选择文件夹 的功能
1. 第一种方法，纯 js 代码
其原理是：利用 input 标签的 file 类别，打开选择文件对话框通过 input 标签的 change 事件，将选择的文件返回。为了使每次选择的文件都得到更新，在 input 对象用完后每次都移除出 html 中，下次使用时再重新创建并添加到 html 中。代码如下：
/**
* 按钮事件实现函数
* 原理：利用 input 标签的 file 类别，打开选择文件对话框
* 通过 change 事件，将选择的文件返回。为了使每次选择的文件都得到更新，
* 在 input 对象用完后每次都移除出 html 中，下次使用时再重新创建并添加到 html 中
*/
btnClickFun:function(dir){
// 创建 input 标签
var inputObj=document.createElement(‘input’)
// 设置属性
inputObj.setAttribute(‘id’,’_ef’);
inputObj.setAttribute(‘type’,’file’);
inputObj.setAttribute(“style”,’visibility:hidden’);
if(dir){// 如果要选择路径，则添加以下两个属性
inputObj.setAttribute(‘webkitdirectory’, “”);
inputObj.setAttribute(‘directory’, “”);
}
// 添加到 DOM 中
document.body.appendChild(inputObj);
// 添加事件监听器
inputObj.addEventListener(“change”,this.updatePath);
// 模拟点击
inputObj.click();
},
// 打开文件选择器 input 标签的 change 事件响应
updatePath:function(){
var inputObj = document.getElementById(“_ef”);
var files = inputObj.files;
console.log(files)
try{
if(files.length > 1){
alert(‘ 当前仅支持选择一个文件 ’)
}
else{
switch(this.btntype){
case ‘store’:
// 临时变量的值赋给输出路径
this.outpath = files[0].path;
break;
case ‘add’:
// 添加文件操作
this.filepath = files[0].path;
if(this.addFile(this.filepath)){
alert(“ 添加成功 ”)
}
break;
default:
break;
}
}
// 移除事件监听器
inputObj.removeEventListener(“change”,function(){});
// 从 DOM 中移除 input
document.body.removeChild(inputObj);
}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.btnClickFun(true);
ipcRenderer.send(‘open-directory-dialog’,’openDirectory’);
ipcRenderer.on(‘selectedItem’,this.getPath);
break;
case ‘add’:
// 添加文件
//
this.btnClickFun(false);
ipcRenderer.send(‘open-directory-dialog’,’openFile’);
ipcRenderer.on(‘selectedItem’,this.getPath);
break;
case ‘remove’:
this.deleteItem();
break;
case ‘pack’:
break;
default:
break;
}
},
getPath:function(e,path){
console.log(path)
if(path == null){
alert(‘ 请选择一个文件 / 文件夹 ’)
}
else{
switch(this.btntype){
case ‘store’:
// 临时变量的值赋给输出路径
this.outpath = path;
break;
case ‘add’:
// 添加文件操作
this.filepath = path;
if(this.addFile(this.filepath)){
alert(“ 添加成功 ”)
}
break;
default:
break;
}
}
},
然后在主进程中设置好子进程的消息监听，并且引入 dialog 模块 import {dialog} from ‘electron’
// 绑定打开对话框事件
ipcMain.on(‘open-directory-dialog’, function (event,p) {
dialog.showOpenDialog({
properties: [p]
},function (files) {
if (files){// 如果有选中
// 发送选择的对象给子进程
event.sender.send(‘selectedItem’, files[0])
}
})
});
这样就可以完成选择文件 / 文件夹的操作了。3. 第一种方法实现的 vue 组件纯 JS 实现的文件选择器，需要操作 DOM 原理：利用 input 标签的 file 类别，打开选择文件对话框通过 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 () {
var vm = this
// Object.assign 将所有的对象合并为一个新对象
return Object.assign({},
// 我们从父级添加所有的监听器
this.$listeners,
// 然后我们添加自定义监听器，
// 或覆写一些监听器的行为
{
// 这里确保组件配合 v-model 的工作
input:
function (event) {
vm.$emit(
‘input’, event.target.value)
}
}
)
}
},
template: {{label}}
})
现在 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 元素一样使用了：所有跟它相同的特性和监听器的都可以工作。
4. 第二种方法实现的 vue 组件 Electron 的 ipcRenderer 模块实现的选择文件器默认打开文件夹，如果需要选择文件，则需要在调用处配置属性 dir=’file’ 属性 caption 显示按钮的文本信息成功调用后会向父进程发送一个‘btnSelectItem’消息用于返回选中的文件全路径