摘要：文章轉(zhuǎn)載自，感謝文章作者，成功完成選擇文件夾的功能第一種方法，純代碼其原理是利用標簽的類別，打開選擇文件對話框通過標簽的事件，將選擇的文件返回。通過標簽對象的屬性獲得選中的文件名。

文章轉(zhuǎn)載自：https://www.jianshu.com/p/e71...，感謝文章作者，成功完成選擇文件夾 的功能

1.第一種方法，純js代碼
其原理是：利用input標簽的file類別，打開選擇文件對話框通過input標簽的change事件，將選擇的文件返回。為了使每次選擇的文件都得到更新，在input對象用完后每次都移除出html中，下次使用時再重新創(chuàng)建并添加到html中。代碼如下：
/**
???????? *按鈕事件實現(xiàn)函數(shù)
???????? *原理：利用input標簽的file類別，打開選擇文件對話框
???????? *通過change事件，將選擇的文件返回。為了使每次選擇的文件都得到更新，
???????? *在input對象用完后每次都移除出html中，下次使用時再重新創(chuàng)建并添加到html中
???????? */
??????? btnClickFun:function(dir){
??????????? // 創(chuàng)建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);
??????????????? // 添加事件監(jiān)聽器
??????????????? 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;
??????????????????? }
??????????????? }
??????????????? // 移除事件監(jiān)聽器
??????????????? inputObj.removeEventListener("change",function(){});
??????????????? // 從DOM中移除input
??????????????? document.body.removeChild(inputObj);
??????????? }catch (error) {
??????????????? alert(error)
??????????? }
??????? },
btnClickFun函數(shù)中創(chuàng)建并設置了input標簽屬性及監(jiān)聽器，函數(shù)updatePath為change事件監(jiān)聽的回調(diào)函數(shù)。通過input標簽對象的files屬性獲得選中的文件名。2.第二種方法，electron首先在子進程中引入ipcRenderer模塊，import {ipcRenderer} from "electron"利用該模塊向主進程發(fā)送“open-directory-dialog”消息，配置參數(shù)為“openDirectory”或“openFile”,并且設置主進程返回的消息“selectedItem”的回調(diào)函數(shù)為getPath，
// 按鈕點擊事件
??????? btnClick:function(type){
?????????? this.btntype = type;
??????????? // 判斷點擊事件是哪個按鈕發(fā)出的
??????????? 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;
??????????????? }
??????????? }
??????? },
然后在主進程中設置好子進程的消息監(jiān)聽，并且引入dialog模塊import { dialog } from "electron"
// 綁定打開對話框事件
ipcMain.on("open-directory-dialog", function (event,p) {
? dialog.showOpenDialog({
??? properties: [p]
? },function (files) {
????? if (files){// 如果有選中
??????? // 發(fā)送選擇的對象給子進程
??????? event.sender.send("selectedItem", files[0])
????? }
? })
});
這樣就可以完成選擇文件/文件夾的操作了。3.第一種方法實現(xiàn)的vue組件純JS實現(xiàn)的文件選擇器，需要操作DOM原理：利用input標簽的file類別，打開選擇文件對話框通過change事件，將選擇的文件返回。為了使每次選擇的文件都得到更新，在input對象用完后每次都移除出html中，下次使用時再重新創(chuàng)建并添加到html中默認打開文件夾，如果需要選擇文件，則需要在調(diào)用處配置屬性dir="file"屬性caption顯示按鈕的文本信息成功調(diào)用后會向父進程發(fā)送一個‘btnSelectItem’消息用于返回選中的文件全路徑

這其中參考了vue官方文檔《將原生事件綁定到組件》章節(jié)，解決父組件調(diào)用時子組件按鈕不響應的問題。將原生事件綁定到組件
你可能有很多次想要在一個組件的根元素上直接監(jiān)聽一個原生事件。這時，你可以使用v-on?的?.native?修飾符：

在有的時候這是很有用的，不過在你嘗試監(jiān)聽一個類似??的非常特定的元素時，這并不是個好主意。比如上述??組件可能做了如下重構(gòu)，所以根元素實際上是一個??元素：

? {{ label }}

這時，父級的?.native?監(jiān)聽器將靜默失敗。它不會產(chǎn)生任何報錯，但是?onFocus?處理函數(shù)不會如你預期地被調(diào)用。
為了解決這個問題，Vue 提供了一個?$listeners?屬性，它是一個對象，里面包含了作用在這個組件上的所有監(jiān)聽器。例如：
{
? focus:
function (event) { / ... / }
? input:
function (value) { / ... / },
}
有了這個?$listeners?屬性，你就可以配合?v-on="$listeners"?將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素。對于類似??的你希望它也可以配合?v-model?工作的組件來說，為這些監(jiān)聽器創(chuàng)建一個類似下述?inputListeners?的計算屬性通常是非常有用的：
Vue.component("base-input", {
? inheritAttrs:
false,
? props: [
"label", "value"],
? computed: {
??? inputListeners:
function () {

var vm = this

// Object.assign 將所有的對象合并為一個新對象

return Object.assign({},

// 我們從父級添加所有的監(jiān)聽器

this.$listeners,

// 然后我們添加自定義監(jiān)聽器，

// 或覆寫一些監(jiān)聽器的行為
??????? {

// 這里確保組件配合 v-model 的工作
????????? input:
function (event) {
??????????? vm.$emit(
"input", event.target.value)
????????? }
??????? }
????? )
??? }
? },
? template:
??? ????? {{ label }}????? ??? ?
})
現(xiàn)在??組件是一個完全透明的包裹器了，也就是說它可以完全像一個普通的?元素一樣使用了：所有跟它相同的特性和監(jiān)聽器的都可以工作。

4.第二種方法實現(xiàn)的vue組件Electron的ipcRenderer模塊實現(xiàn)的選擇文件器默認打開文件夾，如果需要選擇文件，則需要在調(diào)用處配置屬性dir="file"屬性caption顯示按鈕的文本信息成功調(diào)用后會向父進程發(fā)送一個‘btnSelectItem’消息用于返回選中的文件全路徑