fix: 处理位置定位的问题

This commit is contained in:
mtruning 2022-01-25 22:41:12 +08:00
parent 43e557253f
commit 8faa6d516c
2 changed files with 14 additions and 5 deletions

View File

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

View File

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