liuhuajie/lowcode-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:完善预览模式

Browse Source
This commit is contained in:
lhj
2024-11-17 14:47:36 +08:00
parent 8424202fc8
commit f601417913
13 changed files with 130 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/DynamicComponent.vue
View File

@ -1,26 +1,26 @@
<template>
<div
style="width: fit-content; display: flex; flex-direction: column; position: relative;"
v-if="store.nowComponentsData!==null&&(componentVisible || store.designerMode)"
v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
:id="componentId"
:class="[
'dynamic-component',
{ 'hover-state': isHovered },
{ 'click-state': componentSelected }
{ 'hover-state': isHovered && store.designerMode },
{ 'click-state': componentSelected && store.designerMode }
]"
@click.stop="handleClick"
@mouseover="isHovered = true"
@mouseleave="isHovered = false"
>
<div v-if="isHovered" class="component-header">
<span>{{componentName}}</span>
<div v-if="isHovered && store.designerMode" class="component-header">
<span>{{ componentName }}</span>
</div>
<div v-if="componentSelected" class="component-header" :style="headerStyle">
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
<div v-if="componentSelected" style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
<div v-if="componentSelected && store.designerMode" class="component-header" :style="headerStyle">
<div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
<div style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
<icon-copy class="clickable" size="20" />
<icon-edit class="clickable" @click="handleEditFunc" size="20"/>
<icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
<icon-edit class="clickable" @click="handleEditFunc" size="20" />
<icon-delete class="clickable" @click="handleDeleteFunc" size="20" />
</div>
</div>
<div class="component-content">
@ -32,10 +32,10 @@
>
{{ componentText }}
<template v-for="child in componentChildren" :key="child.id">
<DynamicComponent :componentData="child"/>
<DynamicComponent :componentData="child" />
</template>
<template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
<DynamicComponent :component-data="slot"/>
<DynamicComponent :component-data="slot" />
</template>
</component>
</div>
@ -43,9 +43,9 @@
</template>
<script setup lang="ts">
import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
import {componentMapping} from './componentMapping';
import {useSchemeStore} from '../stores/useSchemeStore';
import { defineProps, ref, computed, onMounted, watch, markRaw, nextTick } from 'vue';
import { componentMapping } from './componentMapping';
import { useSchemeStore } from '../stores/useSchemeStore';
const store = useSchemeStore();
const props = defineProps({
@ -82,16 +82,16 @@ const isHovered = ref(false);
const handleClick = () => {
const currentComponent = getCurrentSchemeObj();
if (currentComponent) {
store.updateNowScheme(currentComponent);
console.log(`Component with id ${currentComponent?.id} was clicked.`);
// 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
}
};
const handleEditFunc = () => {
// 编辑功能
};
const handleDeleteFunc = () => {
store.deleteScheme(componentId.value);
};
@ -109,7 +109,7 @@ const adjustHeaderPosition = () => {
let top = 0;
let left = 0;
let justification='';
let justification = '';
// 获取最外层组件渲染区域的边界
const containerEl = document.getElementById('renderArea');
@ -117,26 +117,25 @@ const adjustHeaderPosition = () => {
const containerRect = containerEl.getBoundingClientRect();
debugger
// 计算上下左右的可用空间
const topSpace = componentRect.top - containerRect.top;
const bottomSpace = containerRect.bottom - componentRect.bottom;
// 检查上方是否有足够的空间
if (topSpace >= headerRect.height) {
top = -headerRect.height+2;
top = -headerRect.height + 2;
} else if (bottomSpace >= headerRect.height) {
top = componentRect.height-2;
top = componentRect.height - 2;
}
if (headerRect.width>componentRect.width)
{
left=-2;
justification='flex-start';
}else
{
left=componentRect.width-headerRect.width-2;
justification='flex-end';
if (headerRect.width > componentRect.width) {
left = -2;
justification = 'flex-start';
} else {
left = componentRect.width - headerRect.width - 2;
justification = 'flex-end';
}
headerStyle.value = {
top: `${top}px`,
left: `${left}px`,
@ -145,8 +144,7 @@ const adjustHeaderPosition = () => {
};
onMounted(() => {
adjustHeaderPosition()
// console.log("组件挂载后",props.componentData);
adjustHeaderPosition();
});
watch(() => componentSelected.value, () => {
@ -158,11 +156,10 @@ watch(() => componentSelected.value, () => {
});
</script>
<style scoped>
.dynamic-component {
position: relative;
border: 1px solid transparent; /* 默认透明边框 */
transition: box-shadow 0.1s;
width: fit-content;
}