elecron-vue 关于webview窗口中实现等比缩放的问题

1.首先要从electron中获取webFrame,这个很重要，后面要用到

//webview.vue

import {ipcRenderer,webFrame} from 'electron'

2.根据remote获取当前窗口 //webview.vue

const remote =require('@electron/remote')
const win =remote.getCurrentWindow()

3.创建子窗口 (向主进程发送事件)

webview.vue

let option={name:"baidu.com",type:0,path:'/webview',openZoom:true,opt:{width:1240,height:800,minWidth:1240,minHeight:800,show:false}
ipcRenderer.send('createWindow',option)

4.在mounted中注册一个事件

·4.1在webview中添加ref

webview.vue

<webView id="process-webview" ref="process-webview"></webview>

4.2在mounted中加入事件

webview.vue

this.openZoom=win.openZoom;
if(this.openZoom){
    win.webContents.on('zoom-changed',(event,zoomDirection)=>
    if(zoomDirection=='in){
     this.addZoom()
    }else{
    this.subZoom()
    }
    })
    }

5.缩放比例方法的实现

webview.vue

addZoom(){
 webFrame.setFrameFactor(this.zoom+=0.1)
}
subZoom(){
  webFrame.setFrameFactor(this.zoom-=0.1)
}