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 = [];
const store = useSchemeStore();
watch(store, (n) => {
console.log("store发生了变化", n);
});
// watch(store, (n) => {
// console.log("store发生了变化", n);
// });
const baseScheme = {
"type": "AdaptivePage",

52
src/components/DynamicComponent.vue
View File

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