Electron+vue2 修改窗口大小

在 Electron + Vue 2 的应用中，如果你想修改窗口的大小，可以利用 Electron 提供的 `webContents` 对象以及 Vue 的响应式特性来实现。以下是基本步骤：

1. 首先，在你的 Vue 组件中，假设你有一个引用了 `webContents` 的数据属性，比如 `windowController`：

<template>
  <div ref="myWindowRef" @resize="onResize"></div>
</template>

<script>
export default {
  data() {
    return {
      windowController: null,
    };
  },
  mounted() {
    this.windowController = this.$electron.remote.getCurrentWebContents();
  },
  methods: {
    onResize(e) {
      // 在这里获取到窗口尺寸变化后的新值
      const { width, height } = e;
      this.updateWindowSize(width, height);
    },
    updateWindowSize(width, height) {
      this.windowController.send('windowSizeUpdated', { width, height });
    },
  },
};
</script>

2. 然后，在你的 Vue 实例的某个地方（例如主进程的 Node.js 中），监听 `window-size-updated` 事件并调整窗口大小：

const { BrowserWindow } = require('electron');
const app = require('electron').app;

// 创建一个新的 BrowserWindow
let mainWindow = new BrowserWindow({ width: 800, height: 600 });

mainWindow.webContents.on('window-size-updated', (event, args) => {
  const { width, height } = args;
  // 根据接收到的新尺寸调整窗口
  mainWindow.setSize(width, height);
});