如何在Vue js组件中使用Electron API？

Question

我使用的是电子VUE样板，我想让我的mainWindow一个fullScreen点击按钮后。

电子窗口API：electron.atom.io/docs/api/browser-window

HTML：

<button @click="setFullScreen">Switch to Full Screen</button>

Vue：

export default {
  name: 'mainComponent',
  methods: {
    setFullScreen: function() {
      mainWindow.setFullScreen(true);
    }
  }

这是行不通的。如何在电子战中使用Electron API？

和index.js：

'use strict'

import { app, BrowserWindow } from 'electron'
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:${require('../../../config').port}`
  : `file://${__dirname}/index.html`

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 728,
    width: 1024,
    fullscreen: false,
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })

  // eslint-disable-next-line no-console
  console.log('mainWindow opened')
}

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

你会发现它就像在电子战中一样

图片显示了文件夹的结构如何在 此处输入图像描述

Answer 1

mainWindow 在您的Vue代码中不可用，因为它是在主流程中定义的。

但是，在单个文件组件中，您可以remote从电子导入，在那里您可以访问当前窗口。因此，您的代码将如下所示。

const {remote} = require("electron")

export default {
  name: 'mainComponent',
  methods: {
    setFullScreen: function() {
      remote.getCurrentWindow().setFullScreen(true);
    }
  }
}