diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 354ab670..9b8f152f 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -40,15 +40,15 @@ export const useChartEditStoreStore = defineStore({ }, getEditCanvas(): EditCanvasType { return this.editCanvas - } + }, }, actions: { // * 设置数据项 setEditCanvasItem(key: T, value: any) { this.editCanvas[key] = value }, - // * 设置页面属性 - setPageAttribute( + // * 设置页面样式属性 + setPageStyle( key: T, value: any ): void { @@ -58,10 +58,20 @@ export const useChartEditStoreStore = defineStore({ dom.style[key] = value } }, + // * 设置页面变换时候的 Class + setPageSizeClass(): void { + const dom = this.getEditCanvas.editContentDom + if (dom) { + dom.classList.add('content-resize') + setTimeout(() => { + dom.classList.remove('content-resize') + }, 600); + } + }, // * 设置页面大小 setPageSize(): void { - this.setPageAttribute('height', `${this.getEditCanvas.height}px`) - this.setPageAttribute('width', `${this.getEditCanvas.width}px`) + this.setPageStyle('height', `${this.getEditCanvas.height}px`) + this.setPageStyle('width', `${this.getEditCanvas.width}px`) }, // * 设置鼠标位置 setMousePosition(x: number, y: number): void { @@ -119,8 +129,9 @@ export const useChartEditStoreStore = defineStore({ }, // * 设置缩放 setScale(scale: number, sys = true): void { - if(!this.getEditCanvas.lockScale) { - this.setPageAttribute('transform', `scale(${scale})`) + if (!this.getEditCanvas.lockScale) { + this.setPageSizeClass() + this.setPageStyle('transform', `scale(${scale})`) this.getEditCanvas.userScale = scale if (sys) { this.getEditCanvas.scale = scale diff --git a/src/views/chart/components/ContentEdit/components/EditRange/index.vue b/src/views/chart/components/ContentEdit/components/EditRange/index.vue index 2e6e494f..e42d0aad 100644 --- a/src/views/chart/components/ContentEdit/components/EditRange/index.vue +++ b/src/views/chart/components/ContentEdit/components/EditRange/index.vue @@ -12,8 +12,8 @@ height: 1080px; width: 1920px; border: 1px solid; - border-radius: 15px; background-color: #333; + border-radius: 15px; @include filter-bg-color('background-color2'); @include fetch-theme('box-shadow'); @include filter-border-color('hover-border-color'); diff --git a/src/views/chart/components/ContentEdit/index.vue b/src/views/chart/components/ContentEdit/index.vue index 028e20c6..54b4b8a6 100644 --- a/src/views/chart/components/ContentEdit/index.vue +++ b/src/views/chart/components/ContentEdit/index.vue @@ -9,10 +9,10 @@ >
- +
-