diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue index 7b777734..2cd47ffa 100644 --- a/src/components/common/custom-module/model-custom-group/index.vue +++ b/src/components/common/custom-module/model-custom-group/index.vue @@ -153,7 +153,8 @@ watchEffect(() => { // 根据容器宽度来计算内部大小 const new_width = old_width - outer_spacing - internal_spacing - content_spacing - data_spacing; // 获得对应宽度的比例 - custom_scale.value = new_width / props.dataWidth; + const scale_number = new_width / props.dataWidth; + custom_scale.value = scale_number > 0 ? scale_number : 0; }); //#endregion // 计算纵向显示的宽度 diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue index 6f5c0250..8ba1bed3 100644 --- a/src/components/model-custom/index.vue +++ b/src/components/model-custom/index.vue @@ -76,7 +76,7 @@ const state = reactive({ // 如果需要解构,确保使用toRefs const { form, new_style } = toRefs(state); // 将顶级的字段暴露给孙子组件, 避免传递层级太深 -provide('field_list', computed(() => form.value.field_list)); +provide('field_list', computed(() => form.value?.field_list || [])); onBeforeMount(() => { // 历史数据处理 if (!Object.keys(form.value.data_source_content).includes('data_auto_list') && !Object.keys(form.value.data_source_content).includes('data_list')) { @@ -110,7 +110,8 @@ watchEffect(() => { // 根据容器宽度来计算内部大小 const width = 390 - outer_spacing - internal_spacing - content_spacing - data_spacing - props.outerContainerPadding; // 获得对应宽度的比例 - scale.value = width / 390; + const scale_number = width / 390; + scale.value = scale_number > 0 ? scale_number : 0; }); //#endregion // 公共样式 @@ -176,12 +177,11 @@ watchEffect(() => { if (!isEmpty(data_source_content_list.value)) { num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / Number(data_source_carousel_col)); } - const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.data_style; // 轮播图高度控制 if (form.value.data_source_direction == 'horizontal') { - swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top; + swiper_height.value = form.value.height * scale.value; } else { - swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((data_source_carousel_col - 1) * space_between.value); + swiper_height.value = (form.value.height * scale.value) * col + ((data_source_carousel_col - 1) * space_between.value); } dot_list.value = Array(num); // 更新轮播图的key,确保更换时能重新更新轮播图 diff --git a/src/components/model-data-magic/components/custom/index.vue b/src/components/model-data-magic/components/custom/index.vue index 48f374de..6318e828 100644 --- a/src/components/model-data-magic/components/custom/index.vue +++ b/src/components/model-data-magic/components/custom/index.vue @@ -176,7 +176,8 @@ watchEffect(() => { const data_spacing = ['vertical', 'horizontal'].includes(form.value.data_source_direction) ? new_style.value.column_gap * (form.value.data_source_carousel_col - 1) : 0; // 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例 const width = old_width - data_style - content_spacing - common_styles - data_spacing - (props.dataSpacing / 2); - scale.value = width / form.value.width; + const scale_number = width / form.value.width; + scale.value = scale_number > 0 ? scale_number : 0; }) // 计算纵向显示的宽度 @@ -216,13 +217,11 @@ watchEffect(() => { const col = data_source_content_list.value.length > carousel_col ? carousel_col : data_source_content_list.value.length; // 一屏显示的数量 slides_per_view.value = col; - const { margin_bottom, margin_top } = new_style.value.data_chunk_margin; - const { padding_top, padding_bottom } = new_style.value.data_chunk_padding; // 轮播图高度控制 if (form.value.data_source_direction == '2') { - swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top; + swiper_height.value = form.value.height * scale.value; } else { - swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between.value); + swiper_height.value = (form.value.height * scale.value) * col + ((carousel_col - 1) * space_between.value); } // 更新轮播图的key,确保更换时能重新更新轮播图 carouselKey.value = get_math(); diff --git a/src/utils/index.ts b/src/utils/index.ts index bcf6278e..79501da6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -340,12 +340,12 @@ export const custom_condition_data = (data_source_id: string, option: any, sourc */ const data_handling = (data_source_id: string, sourceList: any, isCustom: boolean) => { // 不输入商品, 文章和品牌时,从外层处理数据 - let icon = get_nested_property(sourceList, data_source_id); + let new_data = get_nested_property(sourceList, data_source_id); // 如果是商品,品牌,文章的图片, 其他的切换为从data中取数据 if (!isEmpty(sourceList.data) && isCustom) { - icon = get_nested_property(sourceList.data, data_source_id); + new_data = get_nested_property(sourceList.data, data_source_id); } - return icon; + return new_data; } /**