修改对齐方式组件唯一性

src/components/drag/resizable.vue

@@ -1,9 +1,9 @@
 <template>
-    <Vue3DraggableResizable classNameActive="active" :initW="initW" :initH="initH" v-model:x="left" v-model:y="top"
-        v-model:w="w" v-model:h="h" :active="active" :handles="sticks" :draggable="true" :resizable="true"
-        @drag-start="print('drag-start')" @resize-start="print('resize-start')" @resizing="print('resizing')"
-        @dragging="print('dragging')" @drag-end="print('drag-end')" @resize-end="print('resize-end')" @activated="activated"
-        @deactivated="deactivated">
+    <Vue3DraggableResizable classNameActive="active" :key="index" :initW="initW" :initH="initH" v-model:x="left"
+        v-model:y="top" v-model:w="w" v-model:h="h" :active="active" :handles="sticks" :draggable="true"
+        :resizable="true" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
+        @resizing="print('resizing')" @dragging="print('dragging')" @drag-end="print('drag-end')"
+        @resize-end="print('resize-end')" @activated="activated" @deactivated="deactivated">
         <component :is="getWidget(currentItem.type)" :config="currentItem"></component>
     </Vue3DraggableResizable>
 </template>
@@ -30,35 +30,52 @@ const props = defineProps({
         type: Object,
         required: true
     },
+    index: Number,
 })
 // 监听 props.dargData 的变化
-watch(() => props.dargData, (newValue, oldValue) => {
-    console.log('workOrder变化了', newValue, oldValue)
-    currentItem.value = JSON.parse(JSON.stringify(newValue))
-    initW.value = currentItem.value.css.width
-    initH.value = currentItem.value.css.height
-    w.value = currentItem.value.css.width
-    h.value = currentItem.value.css.height
-    top.value = currentItem.value.css.top
-    left.value = currentItem.value.css.left
-    isResizable.value = currentItem.value.config.isResizable
-    sticks.value = currentItem.value.config.sticks
-    active.value = currentItem.value.active
-}, { immediate: true, deep: true })
+// watch(() => props.dargData, (newValue, oldValue) => {
+//     console.log('workOrder变化了', newValue, props.index)
+//     currentItem.value = newValue
+//     // currentItem.value = JSON.parse(JSON.stringify(newValue))
+//     initW.value = currentItem.value.css.width
+//     initH.value = currentItem.value.css.height
+//     w.value = currentItem.value.css.width
+//     h.value = currentItem.value.css.height
+//     top.value = currentItem.value.css.top
+//     left.value = currentItem.value.css.left
+//     isResizable.value = currentItem.value.config.isResizable
+//     sticks.value = currentItem.value.config.sticks
+//     active.value = currentItem.value.active
+// }, { immediate: true, deep: true })
 
+currentItem.value = props.dargData
+// currentItem.value = JSON.parse(JSON.stringify(newValue))
+initW.value = currentItem.value.css.width
+initH.value = currentItem.value.css.height
+w.value = currentItem.value.css.width
+h.value = currentItem.value.css.height
+top.value = currentItem.value.css.top
+left.value = currentItem.value.css.left
+isResizable.value = currentItem.value.config.isResizable
+sticks.value = currentItem.value.config.sticks
+active.value = currentItem.value.active
+
+// 子传父
+const emit = defineEmits(['passId', 'modifiedItem']);
+// 修改项
 function print(val) {
     currentItem.value.css.width = w.value
     currentItem.value.css.height = h.value
     currentItem.value.css.top = top.value
     currentItem.value.css.left = left.value
-    console.log(val, 2555)
 }
 const getWidget = (name: string) => {
     //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
     return getName[name]
 }
+// 激活项索引
 function activated() {
-    console.log('活跃');
+    emit('passId', props.index);
 }
 function deactivated() {
     console.log(active.value, '失活');

src/module/index.ts

@@ -3,7 +3,7 @@ import { btnConfig, btnCss } from "./config/button";
 import { configList1, cssList1 } from "./config/input";
 
 const attributeValue = [{
-    id: 1, type: 'Input', name: "输入框3", active: true,
+    id: 1, type: 'Input', name: "输入框3", active: false,
     config: configList1,
     css: cssList1,
 }, {

src/views/HomeView.vue

@@ -52,7 +52,7 @@
         </div>
         <div class="left_paneRight">
           <el-scrollbar style="width: 100%; height: 100%" class="component-list scrollbar-wrapper">
-            <draggable :list="extraImgs" itemKey="id" handle=".move" filter=".forbid" :force-fallback="false"
+            <draggable :list="componentLibrary" itemKey="id" handle=".move" filter=".forbid" :force-fallback="false"
               chosen-class="chosenClass" animation="300" @start="onStart" @end="onEnd" :group="state.groupA"
               :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50"
               :move="onMove" :sort="false">
@@ -75,7 +75,8 @@
                 :handle="'.forbid'" :fallbackOnBody="false" :group="{ name: 'undraggable', pull: false, put: true }">
                 <template #item="{ element, index }">
                   <div class="item_module_center move">
-                    <VueDrag :index="index" :dargData="element" :id="element.id"></VueDrag>
+                    {{ index }}
+                    <VueDrag :index="index" :dargData="element" :key="index" @passId="getId"></VueDrag>
                   </div>
                 </template>
               </draggable>
@@ -99,7 +100,7 @@
         <div class="card_alignment">
           <div class="bg_ment">
             <div class="icon_item_align" :class="activate ? 'active_icon' : 'icon_item_gray'"
-              v-for="(  item, index  ) in   btnAlignment  " :key="index" @click="alignment(item)">
+              v-for="(  item, index  ) in btnAlignment  " :key="index" @click="alignment(item)">
               <el-tooltip class="box-item" :content="item.label" placement="left" effect="light">
                 <span class="iconfont icon_alignment" :class="item.value"></span>
               </el-tooltip>
@@ -116,7 +117,7 @@
     </div>
   </div>
 </template>
-  
+
 <script lang="ts" setup>
 import { DraggableContainer } from 'vue3-draggable-resizable'
 import Draggable from "vuedraggable";
@@ -132,7 +133,6 @@ const tabPosition = ref<string>('style');
 const activeName = ref<string>('bank');
 // 默认选择组件库
 const current = ref<string>('1');
-const deagRef = ref(null)
 const imageUrl = new URL('@/assets/images/head.png', import.meta.url).href;
 const btnOptions = [
   { label: "撤销", value: 'icon-chexiao' },
@@ -152,6 +152,7 @@ function getAssetsImages(name) {
 }
 
 const extraImgs = ref(attributeValue);
+const componentLibrary = JSON.parse(JSON.stringify(extraImgs.value))
 const extraImgs1: any = ref([]);
 const activate: any = ref(true);
 const state = ref({
@@ -209,23 +210,39 @@ function preview() {
   extraImgs1.value = extraImgs1.value
 }
 
-function alignment(params: any) {
-  if (params.type == 'left') {
-    extraImgs1.value[0].css.left = 0
-  } else if (params.type == 'centerHorizontally') {
-    extraImgs1.value[0].css.left = 0
-  } else if (params.type == 'right') {
-    extraImgs1.value[0].css.left = 75
-  } else if (params.type == 'top') {
-    extraImgs1.value[0].css.top = 0
-  } else if (params.type == 'verticalCenter') {
-
-  } else if (params.type == 'bottom') {
+// 激活项索引
+const currentIndex: any = ref(null)
+function getId(params: any) {
+  console.log(params, 222);
 
+  currentIndex.value = params
+}
+// 对齐方式按钮触发
+function alignment(params: any) {
+  console.log(extraImgs1.value, 222);
+
+  if (currentIndex.value != null) {
+    if (params.type == 'left') {
+      extraImgs1.value[currentIndex.value].css.left = 0
+    } else if (params.type == 'centerHorizontally') {
+      const num = (375 / 2) - (extraImgs1.value[currentIndex.value].css.width / 2)
+      extraImgs1.value[currentIndex.value].css.left = num
+    } else if (params.type == 'right') {
+      const num = 375 - extraImgs1.value[currentIndex.value].css.width
+      extraImgs1.value[currentIndex.value].css.left = num
+    } else if (params.type == 'top') {
+      extraImgs1.value[currentIndex.value].css.top = 20
+    } else if (params.type == 'verticalCenter') {
+      const num = (667 / 2) - (extraImgs1.value[currentIndex.value].css.height / 2)
+      extraImgs1.value[currentIndex.value].css.top = num
+    } else if (params.type == 'bottom') {
+      const num = 667 - extraImgs1.value[currentIndex.value].css.height
+      extraImgs1.value[currentIndex.value].css.top = num
+    }
   }
 }
 </script>
-  
+
 <style lang="scss" scoped>
 .home-main-part {
   min-width: 960px;