VuejsコンポーネントでElectronAPIを使用する方法は？

debugcn 投稿 Dev

nbdized

私が使用している電子VUE定型文を、私は自分の作りたいmainWindowAをfullScreenボタンをクリックした後。

Electron Window API：electron.atom.io/docs/api/browser-window

HTML：

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

見る：

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

これは機能していません。electronic-vueでElectronAPIを使用するにはどうすればよいですか？

および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()
  }
})

あなたはそれがelectron-Vueにあるようにそれを見つけるでしょう

写真は、フォルダの構造が画像の説明をここに入力する方法を示しています

バート

mainWindow メインプロセスで定義されているため、Vueコードでは使用できません。

ただし、単一のファイルコンポーネントでは、remote現在のウィンドウにアクセスできる電子からインポートできます。したがって、コードは次のようになります。

const {remote} = require("electron")

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]