拖拽活跃边框线错位、对齐方式数据绑定

src/components/drag/resizable.vue

@@ -1,9 +1,9 @@
 <template>
-    <Vue3DraggableResizable :prevent-deactivation="true" classNameActive="active" :initW="initW" :initH="initH"
-        v-model:x="top" v-model:y="left" v-model:w="w" v-model:h="h" v-model:active="active" :handles="sticks"
-        :draggable="true" :resizable="true" @drag-start="print('drag-start')" @resize-start="print('resize-start')"
-        @dragging="print('dragging')" @resizing="print('resizing')" @drag-end="print('drag-end')"
-        @resize-end="print('resize-end')">
+    <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">
         <component :is="getWidget(currentItem.type)" :config="currentItem"></component>
     </Vue3DraggableResizable>
 </template>
@@ -13,7 +13,7 @@ import getName from '../../views/widgets/getWidget';
 import Vue3DraggableResizable from 'vue3-draggable-resizable'
 //default styles
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
-import { ref } from "vue";
+import { ref, watch } from "vue";
 const initW = ref(0)
 const initH = ref(0)
 const w = ref(0)
@@ -25,25 +25,26 @@ const isResizable = ref(false)
 const sticks = ref([])
 const active = ref(true)
 const currentItem: any = ref({})
-const porps = defineProps({
+const props = defineProps({
     dargData: {
         type: Object,
         required: true
     },
 })
-const arrData = JSON.parse(JSON.stringify(porps.dargData))
-currentItem.value = arrData
-initW.value = arrData.css.width
-initH.value = arrData.css.height
-w.value = arrData.css.width
-h.value = arrData.css.height
-top.value = arrData.css.top
-left.value = arrData.css.left
-console.log(initW.value, initH.value, w.value, h.value, top.value, left.value, '-------');
-
-isResizable.value = arrData.config.isResizable
-sticks.value = arrData.config.sticks
-active.value = arrData.active
+// 监听 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 })
 
 function print(val) {
     currentItem.value.css.width = w.value
@@ -56,6 +57,16 @@ const getWidget = (name: string) => {
     //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
     return getName[name]
 }
+function activated() {
+    console.log('活跃');
+}
+function deactivated() {
+    console.log(active.value, '失活');
+}
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.vdr-container {
+    box-sizing: unset;
+}
+</style>

src/module/config/button.ts

@@ -10,8 +10,8 @@ const btnConfig = {
 }
 
 const btnCss = {
-    top: 20,
-    left: 20,
+    top:  577,
+    left: 142.5,
     width: 90,
     height: 90,
     borderRadius: 8,

src/module/config/input.ts

@@ -11,8 +11,8 @@ const configList1 = {
 }
 
 const cssList1 = {
-    top: 20,
-    left: 20,
+    top: 200,
+    left: 30,
     width: 300,
     height: 32,
     borderRadius: 8,

src/module/index.ts

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

src/views/HomeView.vue

@@ -71,12 +71,11 @@
           <img class="head_image_url" :src="imageUrl" />
           <div class="Bzu">
             <DraggableContainer>
-              <draggable class="Bzu" v-model="extraImgs1" itemKey="id" :force-fallback="false" :sort="false"
-                :handle="'forbid'" :fallbackOnBody="false" :group="{ name: 'undraggable', pull: false, put: true }"
-                @start="onStart" @end="onEnd">
-                <template #item="{ element }">
+              <draggable class="Bzuil" v-model="extraImgs1" itemKey="id" :force-fallback="false" :sort="false"
+                :handle="'.forbid'" :fallbackOnBody="false" :group="{ name: 'undraggable', pull: false, put: true }">
+                <template #item="{ element, index }">
                   <div class="item_module_center move">
-                    <VueDrag :dargData="element" :id="element.id"></VueDrag>
+                    <VueDrag :index="index" :dargData="element" :id="element.id"></VueDrag>
                   </div>
                 </template>
               </draggable>
@@ -99,13 +98,14 @@
         <!-- 右侧对齐方式 -->
         <div class="card_alignment">
           <div class="bg_ment">
-            <div class="icon_item_align" v-for="(  item, index  ) in   btnAlignment  " :key="index">
+            <div class="icon_item_align" :class="activate ? 'active_icon' : 'icon_item_gray'"
+              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>
             </div>
             <div class="line_divider"></div>
-            <div class="icon_item_align">
+            <div class="icon_item_align" :class="activate ? 'active_icon' : 'icon_item_gray'">
               <el-tooltip class="box-item" content="锁定" placement="left" effect="light">
                 <span class="iconfont icon_alignment icon-suoding"></span>
               </el-tooltip>
@@ -132,6 +132,7 @@ 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' },
@@ -139,19 +140,20 @@ const btnOptions = [
   { label: "清除", value: 'icon-qingchu' },
 ];
 const btnAlignment = [
-  { label: "左对齐", value: 'icon-zuoduiqi' },
-  { label: "水平居中", value: 'icon-hengxiangjuzhong' },
-  { label: "右对齐", value: 'icon-youduiqi' },
-  { label: "顶对齐", value: 'icon-shangduiqi' },
-  { label: "垂直居中", value: 'icon-zongxiangjuzhong' },
-  { label: "底对齐", value: 'icon-xiaduiqi' },
+  { type: 'left', label: "左对齐", value: 'icon-zuoduiqi' },
+  { type: 'centerHorizontally', label: "水平居中", value: 'icon-hengxiangjuzhong' },
+  { type: 'right', label: "右对齐", value: 'icon-youduiqi' },
+  { type: 'top', label: "顶对齐", value: 'icon-shangduiqi' },
+  { type: 'verticalCenter', label: "垂直居中", value: 'icon-zongxiangjuzhong' },
+  { type: 'bottom', label: "底对齐", value: 'icon-xiaduiqi' },
 ];
 function getAssetsImages(name) {
   return new URL(`/src/assets/${name}`, import.meta.url).href;
 }
 
 const extraImgs = ref(attributeValue);
-const extraImgs1:any = ref([]);
+const extraImgs1: any = ref([]);
+const activate: any = ref(true);
 const state = ref({
   message: "拖拽",
   groupA: {
@@ -202,10 +204,26 @@ function announce() {
 }
 
 function preview() {
-  console.log(extraImgs1.value[0],887);
+  // console.log(extraImgs1.value[0], 887);
   extraImgs1.value[0].active = true
   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') {
+
+  }
+}
 </script>
   
 <style lang="scss" scoped>
@@ -392,9 +410,10 @@ function preview() {
 
 .card_home {
   width: 375px;
-  margin: 30px auto 8px;
+  margin: 30px auto 0px;
   height: 667px;
-  background-color: #fafafa;
+  background-color: red;
+  // background-color: #fafafa;
   position: relative;
   overflow: hidden;
 }
@@ -469,10 +488,19 @@ function preview() {
   padding: 0px 12px;
 }
 
-.icon_item_align:hover .icon_alignment {
+.active_icon:hover .icon_alignment {
   color: #409EFF;
 }
 
+.icon_item_gray {
+  opacity: 0.3;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: no-drop;
+}
+
 .line_divider {
   display: block;
   width: 24px;
@@ -522,6 +550,15 @@ img {
 
 .Bzu {
   height: 100%;
-  overflow: hidden;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // overflow: hidden;
+}
+
+.Bzuil {
+  height: 100%;
 }
 </style>