Sfoglia il codice sorgente

fix: 处理位置定位的问题

mtruning 3 anni fa
parent
commit
8faa6d516c

+ 2 - 0
src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -35,6 +35,8 @@ const option = computed(() => {
 const attr = toRef(props.chartData, 'attr')
 const wrapperStyle = computed(() => {
   return {
+    left: `${attr.value.x}px`,
+    top: `${attr.value.y}px`,
     width: `${attr.value.w}px`,
     height: `${attr.value.h}px`,
   }

+ 12 - 5
src/views/chart/components/ContentEdit/index.vue

@@ -13,9 +13,13 @@
       <!-- 中间区域 -->
       <EditRange>
         <!-- 组件名称会重复,必须使用 id -->
-        <div v-for="item in chartEditStore.getComponentList" :key="item.id">
-          <component :is="item.key" :chartData="item"/>
-        </div>
+        <component
+          class="edit-content-chart" 
+          v-for="item in chartEditStore.getComponentList"
+          :key="item.id"
+          :is="item.key"
+          :chartData="item"
+        />
       </EditRange>
     </div>
     <!-- 底部控制 -->
@@ -45,7 +49,7 @@ useLayout()
   position: relative;
   width: 100%;
   overflow: hidden;
-  @include background-image('background-point');
+  @include background-image("background-point");
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
     position: relative;
@@ -57,7 +61,10 @@ useLayout()
     @extend .go-transition;
     &.content-resize {
       border-radius: 15px;
-      @include hover-border-color('hover-border-color');
+      @include hover-border-color("hover-border-color");
+    }
+    .edit-content-chart{
+      position: absolute;
     }
   }
 }