fix: 去除模态层

This commit is contained in:
MTrun 2022-03-11 08:45:04 +08:00
parent 43844c834e
commit 0abcbbae53
4 changed files with 5 additions and 24 deletions

View File

@ -10,7 +10,6 @@ export enum EditCanvasTypeEnum {
SCALE = 'scale',
USER_SCALE = 'userScale',
LOCK_SCALE = 'lockScale',
IS_CREATE = 'isCreate',
IS_DRAG= 'isDrag',
}
@ -27,8 +26,6 @@ export type EditCanvasType = {
[EditCanvasTypeEnum.USER_SCALE]: number
// 锁定缩放
[EditCanvasTypeEnum.LOCK_SCALE]: boolean
// 初始化创建
[EditCanvasTypeEnum.IS_CREATE]: boolean
// 拖拽中
[EditCanvasTypeEnum.IS_DRAG]: boolean
}

View File

@ -37,8 +37,6 @@ export const useChartEditStore = defineStore({
userScale: 1,
// 锁定缩放
lockScale: false,
// 初始化
isCreate: false,
// 拖拽中
isDrag: false
},

View File

@ -5,11 +5,9 @@
@mousedown="mousedownHandleUnStop($event, undefined)"
>
<slot></slot>
<!-- 拖拽时的辅助线 -->
<EditAlignLine />
</div>
<!-- 拖拽时的辅助线 -->
<EditAlignLine />
<!-- 拖拽时的遮罩 -->
<div class="go-edit-range-model" :style="rangeModelStyle"></div>
</template>
<script setup lang="ts">
@ -31,7 +29,7 @@ const size = computed(() => {
})
const rangeStyle = computed(() => {
//
//
const scale = {
transform: `scale(${getEditCanvas.value.scale})`
}
@ -45,17 +43,10 @@ const rangeStyle = computed(() => {
? { background: backgroundColor }
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
// @ts-ignore
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>
<style lang="scss" scoped>
@ -67,7 +58,7 @@ const rangeModelStyle = computed(() => {
@include fetch-theme('box-shadow');
@include filter-border-color('hover-border-color');
@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) {
z-index: -1;
@ -77,6 +68,6 @@ const rangeModelStyle = computed(() => {
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0);
background-color: greenyellow;
opacity: .2;
opacity: 0.2;
}
</style>

View File

@ -27,9 +27,6 @@ export const handleDrag = async (e: DragEvent) => {
return
}
// 设置拖拽状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
const dropData: Exclude<ConfigType, ['image']> = JSON.parse(
drayDataString
)
@ -55,8 +52,6 @@ export const handleDragOver = (e: DragEvent) => {
e.preventDefault()
e.stopPropagation()
// 设置拖拽状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
}