Question

我正在使用electron-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()
  }
})

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

图片显示文件夹的结构如何 enter image description here

Answer 1

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

但是，在单个文件组件中，您可以从电子导入remote，您可以在其中访问当前窗口。所以你的代码看起来像这样。

const {remote} = require("electron")

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

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

1 个答案: