mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-04 20:59:26 +08:00
fix: 去除模态层
This commit is contained in:
parent
43844c834e
commit
0abcbbae53
@ -10,7 +10,6 @@ export enum EditCanvasTypeEnum {
|
|||||||
SCALE = 'scale',
|
SCALE = 'scale',
|
||||||
USER_SCALE = 'userScale',
|
USER_SCALE = 'userScale',
|
||||||
LOCK_SCALE = 'lockScale',
|
LOCK_SCALE = 'lockScale',
|
||||||
IS_CREATE = 'isCreate',
|
|
||||||
IS_DRAG= 'isDrag',
|
IS_DRAG= 'isDrag',
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -27,8 +26,6 @@ export type EditCanvasType = {
|
|||||||
[EditCanvasTypeEnum.USER_SCALE]: number
|
[EditCanvasTypeEnum.USER_SCALE]: number
|
||||||
// 锁定缩放
|
// 锁定缩放
|
||||||
[EditCanvasTypeEnum.LOCK_SCALE]: boolean
|
[EditCanvasTypeEnum.LOCK_SCALE]: boolean
|
||||||
// 初始化创建
|
|
||||||
[EditCanvasTypeEnum.IS_CREATE]: boolean
|
|
||||||
// 拖拽中
|
// 拖拽中
|
||||||
[EditCanvasTypeEnum.IS_DRAG]: boolean
|
[EditCanvasTypeEnum.IS_DRAG]: boolean
|
||||||
}
|
}
|
||||||
|
@ -37,8 +37,6 @@ export const useChartEditStore = defineStore({
|
|||||||
userScale: 1,
|
userScale: 1,
|
||||||
// 锁定缩放
|
// 锁定缩放
|
||||||
lockScale: false,
|
lockScale: false,
|
||||||
// 初始化
|
|
||||||
isCreate: false,
|
|
||||||
// 拖拽中
|
// 拖拽中
|
||||||
isDrag: false
|
isDrag: false
|
||||||
},
|
},
|
||||||
|
@ -5,11 +5,9 @@
|
|||||||
@mousedown="mousedownHandleUnStop($event, undefined)"
|
@mousedown="mousedownHandleUnStop($event, undefined)"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
<!-- 拖拽时的辅助线 -->
|
||||||
|
<EditAlignLine />
|
||||||
</div>
|
</div>
|
||||||
<!-- 拖拽时的辅助线 -->
|
|
||||||
<EditAlignLine />
|
|
||||||
<!-- 拖拽时的遮罩 -->
|
|
||||||
<div class="go-edit-range-model" :style="rangeModelStyle"></div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -31,7 +29,7 @@ const size = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const rangeStyle = computed(() => {
|
const rangeStyle = computed(() => {
|
||||||
// 缩放
|
// 缩放
|
||||||
const scale = {
|
const scale = {
|
||||||
transform: `scale(${getEditCanvas.value.scale})`
|
transform: `scale(${getEditCanvas.value.scale})`
|
||||||
}
|
}
|
||||||
@ -45,17 +43,10 @@ const rangeStyle = computed(() => {
|
|||||||
? { background: backgroundColor }
|
? { background: backgroundColor }
|
||||||
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
|
||||||
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
|
return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
|
||||||
})
|
})
|
||||||
|
|
||||||
// 模态层
|
|
||||||
const rangeModelStyle = computed(() => {
|
|
||||||
const dragStyle = getEditCanvas.value.isCreate && {'z-index': 99999 }
|
|
||||||
// @ts-ignore
|
|
||||||
return { ...useSizeStyle(size.value), ...dragStyle}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -67,7 +58,7 @@ const rangeModelStyle = computed(() => {
|
|||||||
@include fetch-theme('box-shadow');
|
@include fetch-theme('box-shadow');
|
||||||
@include filter-border-color('hover-border-color');
|
@include filter-border-color('hover-border-color');
|
||||||
@include fetch-theme-custom('border-color', 'background-color4');
|
@include fetch-theme-custom('border-color', 'background-color4');
|
||||||
@include filter-bg-color('background-color2')
|
@include filter-bg-color('background-color2');
|
||||||
}
|
}
|
||||||
@include go(edit-range-model) {
|
@include go(edit-range-model) {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
@ -77,6 +68,6 @@ const rangeModelStyle = computed(() => {
|
|||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
border: 1px solid rgba(0, 0, 0, 0);
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
background-color: greenyellow;
|
background-color: greenyellow;
|
||||||
opacity: .2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -27,9 +27,6 @@ export const handleDrag = async (e: DragEvent) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置拖拽状态
|
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
|
||||||
|
|
||||||
const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
|
const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
|
||||||
drayDataString
|
drayDataString
|
||||||
)
|
)
|
||||||
@ -55,8 +52,6 @@ export const handleDragOver = (e: DragEvent) => {
|
|||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
|
|
||||||
// 设置拖拽状态
|
|
||||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
|
|
||||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user