标签：vue 自定义 isKeyDown res dinatesX dinatesY electron mousedown ev

使用@mousedown，@mouseup，@mousemove分别创建三个方法实现会出现鼠标快速移动的时候出现框卡住。

所以只能使用原生js来解决

1，标签看你用的哪个UI框架，事件只加这一个即可，然后这个你想在哪个区域实现拖动事件 @mousedown 就放在哪里

<v-btn  @mousedown="mousedown" />

2，然后是data部分

data () {
   return {
       isKeyDown:false,
       dinatesX:0,
       dinatesY:0,
   }
},

3，调用的方法（渲染进程中的方法，其实也就是vue页面中）

mousedown(e){
      this.isKeyDown = true 
      this.dinatesX = e.x
      this.dinatesY = e.y
        
      document.onmousemove = (ev) => {
          if(this.isKeyDown){
            const x = ev.screenX - this.dinatesX
            const y = ev.screenY - this.dinatesY
            //给主进程传入坐标
            this.$electron.ipcRenderer.send('move-application',{
                appX:x,
                appY:y
              })
          }
      };
      document.onmouseup = (ev) => {
          this.isKeyDown = false
      };
}

4，主进程方法，例如：background.js

ipcMain.on('move-application',(event,res) => {
  mainWindow && mainWindow.setPosition(res.appX,res.appY)
})

这时就可以了，完成。

标签：vue,自定义,isKeyDown,res,dinatesX,dinatesY,electron,mousedown,ev
来源： https://www.cnblogs.com/ghc520/p/16375722.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。