test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-05 05:09:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 去除模态层

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -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
} }

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

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

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

@ -5,11 +5,9 @@
@mousedown="mousedownHandleUnStop($event, undefined)" @mousedown="mousedownHandleUnStop($event, undefined)"
> >
<slot></slot> <slot></slot>
</div>
<!-- 拖拽时的辅助线 --> <!-- 拖拽时的辅助线 -->
<EditAlignLine /> <EditAlignLine />
<!-- 拖拽时的遮罩 --> </div>
<div class="go-edit-range-model" :style="rangeModelStyle"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -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>

5
src/views/chart/ContentEdit/hooks/useDrag.hook.ts
View File

@ -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'
} }