QQ首页的弹窗和天气效果都很好。最近一直在想用electron来模仿这样的效果，主要是弹窗控件。我也考虑过windows的重用。下面是完成后的效果，注意：样式只是随便调整一下。毕竟没有那么多时间去获取风格分析思路。制作思路是先将鼠标左键放在头像上，显示带有动画效果的窗口。当鼠标在两个窗口之间来回移动时，窗口就会显示出来。跟随动作，切换内容。不难发现，此时移动时，是一个复用的窗口，可以减少创建窗口的开销。天气里，一个路由动画就足够窗口反转了。解决方案解决方案直接写代码吧。这里使用了两个插件electron-vue和electron-vue-windows。如果你不知道细节，你可以在这里查看electron-vue-windows。思路是可以直接通过reuse属性重用窗口。当调用closeWin()时，实际上窗口是隐藏的，从而降低了创建窗口的成本。窗口打开时的动画可以用一个effect做，但是窗口已经打开只能通过移动动画来移动，这就是动画，所以我们要加一个判断。如果窗口已经打开，则移动它并在未打开时创建它。代码如下：openLeft(e,index){clearTimeout(this.timeTap)letwidth=300//获取当前窗口的宽高，用于定位子窗口letfatherBounds=this.$Win.win.getBounds()//判断右侧是否越界（计算子窗口坐标）letleftWidth=e.screenX-e.offsetX-width-15letx=leftWidth<0?leftWidth+width+fatherBounds.width:leftWidthlety=e.screenY-e.offsetY//检查子窗口是否存在letwin=this.$Win.getWinByName('leftname')if(win){//如果存在是一个跳转路由并重新发送数据this.$Win.routerPush({router:'/infoWindow/'+index,win:win,data:{name:index}})win.show()//动画过渡到新位置this.$Win.animation({win:win,time:200,to:{x:x,y:y}})}else{this.$store.dispatch('changeTransition','default')//如果没有子窗口则创建一个新窗口win=this.$Win.createWin({width:300,height:200,windowConfig:{router:'/infoWindow/'+index,name:'leftname',customAnimation:{fromPosition:{x:x,y:y-50},time:300//动画时间},data:{name:index},reuse:true,reload:true,vibrancy:true},x:x,y:y,alwaysOnTop:true,skipTaskbar:true})win.show()}}又一个天气窗口，注意qq的天气窗口可以被旋转了，所以这时候就不能用背景虚化的窗口，只能用透明的窗口，那么反转效果也很容易，直接写css就可以了，代码如下：showwindow(){letfatherBounds=this.$Win.win.getBounds()//判断右侧是否越界letleftWidth=window.screen.width-fatherBounds.width-fatherBounds.x-300letx=leftWidth>=0？fatherBounds.width+fatherBounds.x:fatherBounds.x-300lety=fatherBounds.yletwin=this.$Win.createWin({width:300,height:200,x:x,y:y,windowConfig:{路由器:'/cloudWindow',vibrancy:false,name:'cloud',animation:'fromBottom'}})win.show()}窗口反转的代码看不懂可以看这里
