组件层级

src/components/drag/resizable.vue

@@ -1,7 +1,8 @@
 <template>
-    <Vue3DraggableResizable :classNameDraggable="dargData.config.lineNum ? 'forceAutoHeight' : ''" :snap="true"
-        classNameActive="active" :key="dargData.soleId" :initW="initW" :initH="initH" v-model:x="left" v-model:y="top"
-        v-model:w="w" v-model:h="h" v-model:active="active" :handles="sticks" :draggable="draggable" :resizable="resizable"
+    <Vue3DraggableResizable :style="{ zIndex: zIndex, }"
+        :classNameDraggable="dargData.config.lineNum ? 'forceAutoHeight' : ''" :snap="true" classNameActive="active"
+        :key="dargData.soleId" :initW="initW" :initH="initH" v-model:x="left" v-model:y="top" v-model:w="w" v-model:h="h"
+        v-model:active="active" :handles="sticks" :draggable="draggable" :resizable="resizable"
         @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" @click.native="clickHandler">
@@ -24,6 +25,7 @@ const w: any = ref(0)
 const h: any = ref(null)
 const top = ref(0)
 const left = ref(0)
+const zIndex = ref(0)
 const isResizable = ref(false) //禁止缩放
 const draggable1 = ref(true) //默认true允许
 const resizable1 = ref(true) //默认true允许
@@ -72,6 +74,7 @@ watch(() => props.dargData, (newValue) => {
         h.value = newValue.css.height
         top.value = newValue.css.top
         left.value = newValue.css.left
+        zIndex.value = newValue.css.zIndex
         if ('draggable' in newValue.config) {
             draggable1.value = newValue.config.draggable
         }

src/components/widgets/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center_in card_button_padding"
-    :style="{ width: width + 'px', height: height + 'px', zIndex: zIndex, backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', }">
+    :style="{ width: width + 'px', height: height + 'px', backgroundColor: backgroundColor, borderRadius: borderRadius + 'px', }">
     <div class="beyondHiding" style="text-align: center;"
       :style="{ width: textWidth + 'px', color: color, fontSize: fontSize + 'px', fontWeight: fontWeight, }">{{ value }}
     </div>
@@ -14,7 +14,6 @@ const props = defineProps(["config"])
 const value = ref(false)
 const width = ref('')
 const height = ref('')
-const zIndex = ref(0)
 const backgroundColor = ref('')
 const borderRadius = ref('')
 
@@ -27,7 +26,6 @@ watch(() => props.config, (newValue) => {
   if (newValue) {
     value.value = newValue.config.name
     width.value = newValue.css.width
-    zIndex.value = newValue.css.zIndex
     height.value = newValue.css.height
     backgroundColor.value = newValue.css.backgroundColor
     borderRadius.value = newValue.css.borderRadius

src/module/config/picture.ts

@@ -18,7 +18,6 @@ const pictureCss = {
     height: 170,
     borderRadius: 15,
     opacity: 1,
-    zIndex: 0,
 }
 
 export { pictureConfig, pictureCss }

src/views/TestDrag.vue

@@ -6,18 +6,22 @@
                     <VueDrag class="draggable" :dargData="element"></VueDrag>
                 </div>
             </DraggableContainer> -->
-            <DraggableContainer :referenceLineColor="'#0f0'">
-                <Vue3DraggableResizable :lock-aspect-ratio="true" @activated="activated" @deactivated="deactivated">
+            <DraggableContainer>
+                <Vue3DraggableResizable draggable :lock-aspect-ratio="true" @activated="activated"
+                    @deactivated="deactivated">
                     <div style="width: 200px;height: 200px;background-color: #fff;">2151</div>
                 </Vue3DraggableResizable>
-                <Vue3DraggableResizable @activated="activated" @deactivated="deactivated">
-                    <div style="width: 200px;height: 200px;background-color: #fff;">Another test</div>
-                </Vue3DraggableResizable>
+                <div style="width: 600px;height: 600px;" id="parent">
+                    <Vue3DraggableResizable parent="#parent" draggable @activated="activated" @deactivated="deactivated">
+                        <div style="width: 200px;height: 200px;background-color: #fff;">Another test</div>
+                    </Vue3DraggableResizable>
+                </div>
             </DraggableContainer>
         </div>
         <div class="left right">
             <DraggableContainer>
                 <div v-for="( element, index ) in  extraImgs1 " :key="index">
+                    <div>{{ element }}</div>
                     <VueDrag class="draggable" :dargData="element"></VueDrag>
                 </div>
             </DraggableContainer>