From 2833dd5b3c3f6b47ca4a1655a38bc62686ebc0e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Tue, 5 Aug 2025 18:14:35 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E7=A9=BA=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/model-tabs-magic/index.vue | 16 +++--- .../model-tabs-magic-content.vue | 56 +++++++++---------- .../model-tabs/model-tabs-content.vue | 6 +- src/config/const/carousel.ts | 28 ---------- src/config/const/tabs-carousel.ts | 30 +--------- 5 files changed, 39 insertions(+), 97 deletions(-) diff --git a/src/components/model-tabs-magic/index.vue b/src/components/model-tabs-magic/index.vue index 93d03350..457e83ae 100644 --- a/src/components/model-tabs-magic/index.vue +++ b/src/components/model-tabs-magic/index.vue @@ -83,11 +83,11 @@ const tabs_magic_value = computed(() => active_tabs_value.value[tabs_magic_type. // 判断是否开启轮播图背景设置 const is_rotating_background = computed(() => active_tabs_value.value.rotating_background == '1'); // 选中的公共样式 -const style_active_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : ''); -const style_active_img_container = computed(() => tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : ''); +const style_active_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : '') : ''); +const style_active_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : '') : ''); // 选中的内容区域样式 -const magic_container = computed(() => common_styles_computer(tabs_magic_value.value.style.magic_content)); -const magic_img_container = computed(() => common_img_computer(tabs_magic_value.value.style.magic_content)); +const magic_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_styles_computer(tabs_magic_value.value.style.magic_content)) : ''); +const magic_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_img_computer(tabs_magic_value.value.style.magic_content)) : ''); //#region 图片魔方的缩放比例 const new_style = computed(() => props.value.style); // 图片魔方的缩放比例 @@ -96,9 +96,11 @@ watchEffect(() => { // 获取公共样式的数据 const common_data = new_style.value.common_style; const common_width = common_data.margin_left + common_data.margin_right + common_data.padding_left + common_data.padding_right + border_width(common_data); - - const { margin_left, margin_right, padding_left, padding_right } = tabs_magic_value.value.style.magic_content; - const content_width = margin_left + margin_right + padding_left + padding_right + border_width(tabs_magic_value.value.style.magic_content); + let content_width = 0; + if (!isEmpty(tabs_magic_value.value)) { + const { margin_left, margin_right, padding_left, padding_right } = tabs_magic_value.value.style.magic_content; + content_width = margin_left + margin_right + padding_left + padding_right + border_width(tabs_magic_value.value.style.magic_content); + } // 根据容器宽度来计算内部大小 const typewidth = 390 - content_width - common_width; // 获得对应宽度的比例 diff --git a/src/components/model-tabs-magic/model-tabs-magic-content.vue b/src/components/model-tabs-magic/model-tabs-magic-content.vue index 5aec2b4a..971b203d 100644 --- a/src/components/model-tabs-magic/model-tabs-magic-content.vue +++ b/src/components/model-tabs-magic/model-tabs-magic-content.vue @@ -58,7 +58,7 @@ @@ -113,7 +115,7 @@ - + @@ -121,15 +123,17 @@ - - - - - - - - - + @@ -216,15 +220,11 @@ const tabs_list_click = (item: any, index: number) => { } } const remove = (index: number) => { - if (form.value.tabs_list.length > 1) { - form.value.tabs_list.splice(index, 1); - if (form.value.tabs_list.length > index) { - form.value.tabs_active_index = index + 1; - } else { - form.value.tabs_active_index = index; - } + form.value.tabs_list.splice(index, 1); + if (form.value.tabs_list.length > index) { + form.value.tabs_active_index = index + 1; } else { - ElMessage.warning('至少保留一个选项卡'); + form.value.tabs_active_index = index; } }; // 拖拽更新之后，更新数据 diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue index 66923bcc..5f700572 100644 --- a/src/components/model-tabs/model-tabs-content.vue +++ b/src/components/model-tabs/model-tabs-content.vue @@ -162,11 +162,7 @@ const add = () => { }); }; const remove = (index: number) => { - if (form.value.tabs_list.length > 1) { - form.value.tabs_list.splice(index, 1); - } else { - ElMessage.warning('至少保留一个选项卡'); - } + form.value.tabs_list.splice(index, 1); }; // 拖拽更新之后，更新数据 const on_sort = (new_list: nav_group[]) => { diff --git a/src/config/const/carousel.ts b/src/config/const/carousel.ts index 9849e6a0..e622772c 100644 --- a/src/config/const/carousel.ts +++ b/src/config/const/carousel.ts @@ -75,34 +75,6 @@ const defaultSearch: defaultSearch = { height: 300,//轮播高度 // 轮播图片 carousel_list: [ - { - carousel_img: [], - carousel_video: [], - carousel_link: {}, - video_title: '视频名称', - style: { - direction: '90deg', - color_list: [{ color: '', color_percentage: undefined }], - background_img_style: '2', - background_type: 'custom', - background_img: [], - is_background_img_blur: '0', - } - }, - { - carousel_img: [], - carousel_video: [], - carousel_link: {}, - video_title: '视频名称', - style: { - direction: '90deg', - color_list: [{ color: '', color_percentage: undefined }], - background_img_style: '2', - background_type: 'custom', - background_img: [], - is_background_img_blur: '0', - } - }, { carousel_img: [], carousel_video: [], diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts index 75a3c324..a4801ac1 100644 --- a/src/config/const/tabs-carousel.ts +++ b/src/config/const/tabs-carousel.ts @@ -190,35 +190,7 @@ const defaultTabs: defaultTabs = { background_img: [], is_background_img_blur: '0', } - }, - { - carousel_img: [], - carousel_video: [], - carousel_link: {}, - video_title: '视频名称', - style: { - direction: '90deg', - color_list: [{ color: '', color_percentage: undefined }], - background_img_style: '2', - background_type: 'custom', - background_img: [], - is_background_img_blur: '0', - } - }, - { - carousel_img: [], - carousel_video: [], - carousel_link: {}, - video_title: '视频名称', - style: { - direction: '90deg', - color_list: [{ color: '', color_percentage: undefined }], - background_img_style: '2', - background_type: 'custom', - background_img: [], - is_background_img_blur: '0', - } - }, + } ], // 轮播高度 height: 300,