Browse Source

解决分屏按钮复合操作事件带来的bug

liuwei 4 years ago
parent
commit
e355979b2f
1 changed files with 6 additions and 1 deletions
  1. 6 1
      src/renderer/components/Button.vue

+ 6 - 1
src/renderer/components/Button.vue

@@ -43,6 +43,7 @@
                 staticUrl:this.$store.state.staticUrl, // 静态资源路径
                 window:this.$attrs.window,
                 isPressDownButtons:[], // 初始化时默认按下的按钮
+                flag:false,// 只有鼠标按下后才会触发鼠标离开事件
             }
         },
 
@@ -108,6 +109,7 @@
             // 鼠标按下事件
             mouseDown(e) {
                 if(e.ButtonType === 0){
+                    this.flag = true
                     this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')'
                 }
             },
@@ -115,13 +117,14 @@
             // 鼠标松开事件
             async mouseUp(e) {
                 if(e.ButtonType === 0){
+                    this.flag = false
                     this.mouseUpOrOut(e)
                 }
             },
 
             // 鼠标离开(防止鼠标拖动后松开事件失效)
             async mouseOut(e) {
-                if(e.ButtonType === 0){
+                if(e.ButtonType === 0 && this.flag){
                     this.mouseUpOrOut(e)
                 }
             },
@@ -130,6 +133,8 @@
             async mouseUpOrOut(e) {
                 this.$refs[e.ID][0].style.backgroundImage = 'url('+`${this.staticUrl}/Data/${e.BackIcon}`+')'
 
+                this.flag = false
+
                 // 分屏和清屏按钮控制
                 for(const item of e.MouseDownActionList){
                     // 获取大屏对象