Vue

1.打开父子模态创建，

<button @click="showModalHandler">父子模态窗口</button>

//renderer渲染器中主注册事件
showModalHandler() {
      ipcRenderer.send("child-down-modal");
    }

//主进程中触发事件
  /**
   * 父子模态窗口
   */
  let childDownModal;
  ipcMain.on('child-down-modal', () => {
    childDownModal = new BrowserWindow({
      parent: mainWindow,
      modal: true,
      show: false,
      width: 300,
      height: 300,
      resizable: false,
      backgroundColor: "#fff",
      frame: false,
      hasShadow: true,
      closable: true,
      webPreferences: {
        devTools: false
      }
    })
    childDownModal.once('ready-to-show', () => {
      childDownModal.show();
    })
    childDownModal.loadURL(winURL + '#/downloadModal')
  })
  //关闭模态窗口
  ipcMain.on('close-down-modal', () => {
    childDownModal.hide();
  })

2、打开文件目录

const {shell}  = require('electron').remote //渲染器中

shell模块提供与桌面集成相关的功能。

<template>
  <div class="download-container sureDrag">
    <button @click="openFileHandler">打开文件目录</button>
  </div>
</template>

<script>
const ipcRenderer = require("electron").ipcRenderer;
export default {
  methods: {
    openFileHandler() {
      const { shell } = require("electron").remote;
      shell.showItemInFolder("D:CloudMusic");
    }
  }
};
</script>

3.对话框打开文件

const {dialog} = require('electron').remote;

dialog.showOpenDialog()//可默认打开文件