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-13 00:20:25 +08:00
parent d3e919ce7a
commit 8ea884a71e
2 changed files with 32 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
preview/views/MainView.vue
View File

@ -78,9 +78,9 @@ let list = ref([]);
let componentsList = []; let componentsList = [];
const store = useSchemeStore(); const store = useSchemeStore();
watch(store, (n) => { // watch(store, (n) => {
console.log("store发生了变化", n); // console.log("store发生了变化", n);
}); // });
const baseScheme = { const baseScheme = {
"type": "AdaptivePage", "type": "AdaptivePage",

70
src/components/DynamicComponent.vue
View File

@ -1,14 +1,16 @@
<template> <template>
<component v-if="componentVisible" @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps" <div onclick="handleClick">
:class="componentClass" :style="componentStyle"> <component v-if="componentVisible" :id="componentId" :is="componentType" v-bind="componentPropsWithDisabled"
{{ componentText }} :class="componentClass" :style="componentStyle">
<template v-for="child in componentChildren" :key="child.id"> {{ componentText }}
<DynamicComponent :component-data="child" /> <template v-for="child in componentChildren" :key="child.id">
</template> <DynamicComponent :component-data="child" />
<template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]> </template>
<DynamicComponent :component-data="slot" /> <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
</template> <DynamicComponent :component-data="slot" />
</component> </template>
</component>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -24,22 +26,22 @@ const props = defineProps({
onMounted(() => { onMounted(() => {
console.log(props.componentData); console.log(props.componentData);
}); });
const componentId = computed(() => props.componentData?.id || '');
const componentId = ref(props.componentData?.id || ''); const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
const componentType = ref(markRaw(componentMapping[props.componentData?.type]) || 'div'); // 使用 markRaw const componentProps = computed(() => props.componentData?.props || {});
const componentProps = ref(props.componentData?.props || {}); const componentDisable = computed(() => props.componentData?.disable || false);
const componentDisable = ref(props.componentData?.disable || false); const componentVisible = computed(() => props.componentData?.visible);
const componentVisible = ref(props.componentData?.visible || true); const componentChildren = computed(() => props.componentData?.children || []);
const componentChildren = ref(props.componentData?.children || []); const componentText = computed(() => props.componentData?.text || '');
const componentText = ref(props.componentData?.text || ''); const componentClass = computed(() => props.componentData?.class || []);
const componentClass = ref(props.componentData?.class || []); const componentStyle = computed(() => props.componentData?.style || []);
const componentStyle = ref(props.componentData?.style || []); const componentSlots = computed(() => props.componentData?.slots || {});
const componentSlots = ref(props.componentData?.slots || {});
// 确保 componentProps 包含 disabled 属性 // 确保 componentProps 包含 disabled 属性
watch(componentDisable, (newDisable) => { const componentPropsWithDisabled = computed(() => ({
componentProps.value['disabled'] = newDisable; ...componentProps.value,
}); disabled: componentDisable.value
}));
// 获取当前组件的最新数据 // 获取当前组件的最新数据
const getCurrentSchemeObj = () => { const getCurrentSchemeObj = () => {
@ -47,23 +49,9 @@ const getCurrentSchemeObj = () => {
}; };
// 监听 previewScheme 的变化 // 监听 previewScheme 的变化
watch(() => store.previewScheme, (newPreviewScheme) => { // watch(() => props.componentData, (n) => {
// 重新获取当前组件的最新数据 // console.log("currentComponent", JSON.stringify(n));
const currentComponent = getCurrentSchemeObj(); // }, { deep: true });
console.log("currentComponent", JSON.stringify(currentComponent));
if (currentComponent) {
// 更新组件数据
componentProps.value = currentComponent.props ;
componentDisable.value = currentComponent.disable ;
componentVisible.value = currentComponent?.visible;
componentChildren.value = currentComponent.children ;
componentText.value = currentComponent.text;
componentClass.value = currentComponent.class ;
componentStyle.value = currentComponent.style ;
componentSlots.value = currentComponent.slots ;
}
console.log("store.previewScheme has changed",componentVisible.value)
}, { deep: true });
const handleClick = () => { const handleClick = () => {
console.log(`Component with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`); console.log(`Component with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);