sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改为空时的逻辑处理

v1.4.0
于肖磊 2025-08-05 18:14:35 +08:00
parent 324c36e4fb
commit 2833dd5b3c
5 changed files with 39 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/model-tabs-magic/index.vue
View File

@ -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;
// 获得对应宽度的比例

56
src/components/model-tabs-magic/model-tabs-magic-content.vue
View File

@ -58,7 +58,7 @@
<sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
<template v-if="form.tabs_active_index == 0">
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
<el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
@ -66,15 +66,17 @@
<el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
<template v-if="!isEmpty(form.home_data.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
</template>
</div>
</div>
@ -113,7 +115,7 @@
</el-form-item>
<!-- 魔方内容显示页面 -->
<el-form-item label="魔方内容" class="w mb-0">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" @change="magic_type_change()">
<el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
<el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
@ -121,15 +123,17 @@
<el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
</el-form-item>
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
<template v-if="!isEmpty(row.magic_type)">
<!-- 魔方内容设置 -->
<el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
<el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
<tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
<tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
</el-tab-pane>
</el-tabs>
</template>
</template>
</div>
</template>
@ -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;
}
};
// 拖拽更新之后，更新数据

6
src/components/model-tabs/model-tabs-content.vue
View File

@ -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[]) => {

28
src/config/const/carousel.ts
View File

@ -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: [],

30
src/config/const/tabs-carousel.ts
View File

@ -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,