github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 00:02:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 新增resize时的边框变色交互

Browse Source
This commit is contained in:
mtruning 2022-01-23 01:12:49 +08:00
parent f9d533972f
commit 0033b42008
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -40,15 +40,15 @@ export const useChartEditStoreStore = defineStore({
}, },
getEditCanvas(): EditCanvasType { getEditCanvas(): EditCanvasType {
return this.editCanvas return this.editCanvas
} },
}, },
actions: { actions: {
// * 设置数据项 // * 设置数据项
setEditCanvasItem<T extends keyof EditCanvasType>(key: T, value: any) { setEditCanvasItem<T extends keyof EditCanvasType>(key: T, value: any) {
this.editCanvas[key] = value this.editCanvas[key] = value
}, },
// * 设置页面属性 // * 设置页面样式属性
setPageAttribute<T extends keyof CSSStyleDeclaration>( setPageStyle<T extends keyof CSSStyleDeclaration>(
key: T, key: T,
value: any value: any
): void { ): void {
@ -58,10 +58,20 @@ export const useChartEditStoreStore = defineStore({
dom.style[key] = value 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 { setPageSize(): void {
this.setPageAttribute('height', `${this.getEditCanvas.height}px`) this.setPageStyle('height', `${this.getEditCanvas.height}px`)
this.setPageAttribute('width', `${this.getEditCanvas.width}px`) this.setPageStyle('width', `${this.getEditCanvas.width}px`)
}, },
// * 设置鼠标位置 // * 设置鼠标位置
setMousePosition(x: number, y: number): void { setMousePosition(x: number, y: number): void {
@ -120,7 +130,8 @@ export const useChartEditStoreStore = defineStore({
// * 设置缩放 // * 设置缩放
setScale(scale: number, sys = true): void { setScale(scale: number, sys = true): void {
if (!this.getEditCanvas.lockScale) { if (!this.getEditCanvas.lockScale) {
this.setPageAttribute('transform', `scale(${scale})`) this.setPageSizeClass()
this.setPageStyle('transform', `scale(${scale})`)
this.getEditCanvas.userScale = scale this.getEditCanvas.userScale = scale
if (sys) { if (sys) {
this.getEditCanvas.scale = scale this.getEditCanvas.scale = scale

2
src/views/chart/components/ContentEdit/components/EditRange/index.vue
View File

@ -12,8 +12,8 @@
height: 1080px; height: 1080px;
width: 1920px; width: 1920px;
border: 1px solid; border: 1px solid;
border-radius: 15px;
background-color: #333; background-color: #333;
border-radius: 15px;
@include filter-bg-color('background-color2'); @include filter-bg-color('background-color2');
@include fetch-theme('box-shadow'); @include fetch-theme('box-shadow');
@include filter-border-color('hover-border-color'); @include filter-border-color('hover-border-color');

8
src/views/chart/components/ContentEdit/index.vue
View File

@ -58,14 +58,20 @@ computed(() => {})
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;
top: 20px; top: 20px;
left: 20px; left: 20px;
transform-origin: left top; transform-origin: left top;
border: 1px solid rgba(0, 0, 0, 0);
overflow: hidden;
@extend .go-transition; @extend .go-transition;
&.content-resize {
border-radius: 15px;
@include hover-border-color("hover-border-color");
}
} }
} }
</style> </style>