上下左右键移动问题处理

qianbao
1 parent c47c6979
Showing 1 changed file with 27 additions and 1 deletions
src/views/bigscreenDesigner/designer/index.vue
@@ -509,8 +509,16 @@ export default {
       // 判断是否按住shift键，是就把pin赋值为true
       if (code.keyCode === 16 && code.shiftKey) {
         this.shiftEnt = true;
+      }else if (
+        code.keyCode === 37 ||
+        code.keyCode === 38 ||
+        code.keyCode === 39 ||
+        code.keyCode === 40
+      ) {
+         //上下左右移动
+         this.dragWidgetMoveByKey(code,this.widgetIndex);
       }
-    }, 500, true),
+    }, 10, true),
     handleKeyUp: debounce(function(code) {
       // 判断是否松开shift键，是就把pin赋值为false
       if (code.keyCode === 16) {
@@ -1144,6 +1152,24 @@ export default {
     entryDelete(index){
       this.widgets.splice(index, 1);
     },
+    //根据上下左右键移动(因为子组件直接切换焦点事件问题,这里弥补不点大屏直接切组件移动)
+    dragWidgetMoveByKey(code,widgetIndex){
+      const position = this.widgets[widgetIndex].value.position;
+      const temp=3;
+      if(code.keyCode==40 || code.key=='ArrowDown'){
+        position.top = position.top+temp;
+        this.$refs.widgets[widgetIndex].$refs.draggable.setTop(position);
+      }if(code.keyCode==38 || code.key=='ArrowUp'){
+        position.top = position.top-temp;
+        this.$refs.widgets[widgetIndex].$refs.draggable.setTop(position);
+      }if(code.keyCode==37 || code.key=='ArrowLeft'){
+        position.left = position.left-temp;
+        this.$refs.widgets[widgetIndex].$refs.draggable.setLeft(position);
+      }if(code.keyCode==39 || code.key=='ArrowRight'){
+        position.left = position.left+temp;
+        this.$refs.widgets[widgetIndex].$refs.draggable.setLeft(position);
+      }
+    },
     //输入ctrl+c
     entryCopy(index){
       const obj = this.deepClone(this.widgets[index]);