1、添加水平对齐功能

qianbao
1 parent dd2bf387
Showing 2 changed files with 31 additions and 1 deletions
src/views/bigscreenDesigner/designer/components/contentMenu.vue
src/views/bigscreenDesigner/designer/index.vue
@@ -9,6 +9,9 @@
     <div class="contentmenu__item" @click="setAlignment">
       <i class="iconfont iconzidianxiang"></i> 左对齐
     </div>
+    <div class="contentmenu__item" @click="setTopAlignment">
+      <i class="iconfont iconzidianxiang"></i> 水平对齐
+    </div>
     <div class="contentmenu__item" @click="setlowLayer">
       <i class="iconfont iconleft-copy"></i> 置底图层
     </div>
@@ -109,6 +112,9 @@ export default {
     movedownLayer() {
       this.$emit("movedownLayer");
     },
+    setTopAlignment() {
+      this.$emit("setTopAlignment");
+    },
   },
 };
 </script>
@@ -328,6 +328,7 @@
       @moveupLayer="moveupLayer"
       @movedownLayer="movedownLayer"
       @setAlignment="setAlignment"
+      @setTopAlignment="setTopAlignment"
       @delGroupLayer="delGroupLayer"
       @addGroupLayer="addGroupLayer"
     />
@@ -1363,7 +1364,30 @@ export default {
         message: "小编正在努力开发中，尽情期待(可以选择多选后改变坐标移动哦)",
       });
     },
-    //图层对齐
+    //水平对齐
+    setTopAlignment() {
+      this.selectMore = this.setUnique(this.selectMore);
+      if(!this.shiftEnt || !this.selectMore){
+        this.$message({
+          type: "info",
+          message: "对不起，水平对齐只能多选情况下使用",
+        });
+        return;
+      }
+      const obj = this.widgets[this.widgetIndex];
+      const topNew = obj.value.position.top;
+      if(this.isNotBlankArray(this.selectMore)){
+        for(let i = 0; i< this.selectMore.length;i++){
+          const index = this.selectMore[i];
+          if(this.widgetIndex != index){
+            this.widgets[index].value.position.top=topNew;
+            this.$refs.widgets[index].$refs.draggable.setActive(false);
+          }
+        }
+        this.setShiftEntFalse();
+      }
+    },
+    //左对齐
     setAlignment() {
       this.selectMore = this.setUnique(this.selectMore);
       if(!this.shiftEnt || !this.selectMore){