electron 文件路径选择框

1.background.js

引入dialog

import { app, protocol, BrowserWindow, Menu, dialog } from 'electron';

new BrowserWindow并配置  enableRemoteModule: true, //设置弹出框electron-remote

  const win = new BrowserWindow({width: 800,height: 600,webPreferences: {icon: path.join(__dirname, '../build/icons/1024x1024.ico'),// title: 'FEG OTA bin文件生成工具',// 是否启用Node integrationnodeIntegration: true, // Electron 5.0.0 版本之后它将被默认false// 是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本.默认为 truecontextIsolation: false, // Electron 12 版本之后它将被默认trueenableRemoteModule: true, //设置弹出框electron-remote/// Use pluginOptions.nodeIntegration, leave this alone// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more infonodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,},});

2.在electron新版中已经不支持@electron/remote了，所以需要npm i @electron/remote之后才能使用

3.home.vue文件中

引入@electron/remote模块

  const { BrowserWindow } = require('@electron/remote');const { dialog } = require('electron').remote;var { remote } = require('electron');console.log(remote, dialog, BrowserWindow);remote.dialog.showOpenDialog({title: '选择目标',// 打开单个文件// properties:["openFile"],// 打开多个文件// properties:["openFile","multiSelections"],// 打开目录properties: ['openDirectory'],}).then((result) => {// 是否取消console.log(result.canceled);// 文件路径console.log(result.filePaths);}).catch((error) => {console.log(error);});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！