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

自定义跟随逻辑修改

v1.2.0
于肖磊 2025-02-26 14:37:06 +08:00
parent 5708d439be
commit f156491ae2
17 changed files with 247 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/custom-module/custom-location/index.vue
View File

@ -2,7 +2,7 @@
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item v-if="isFollow" label="跟随组件">
<el-select v-model="data_follow.id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="operation_end">
<el-select v-model="data_follow.id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="data_follow_id_change">
<el-option v-for="item in componentOptions" :key="item.id" :label="!isEmpty(item.new_name) ? item.new_name : item.name" :value="item.id" />
</el-select>
</el-form-item>
@ -56,6 +56,14 @@ const location_y_change = (val: number) => {
data_location.value.record_y = val;
data_location.value.staging_y = val
};
// 数据源id变化时，更新记录的数据，避免出现清空之后为undefined的情况
const data_follow_id_change = (val: string) => {
if (!isEmpty(val)) {
data_follow.value.id = val;
} else {
data_follow.value.id = '';
}
};
// 跟随id发生变化时的处理
watch(() => data_follow.value, (val) => {

140
src/components/common/custom-module/data-rendering/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h re custom-other">
<div ref="allSignList" class="w h re custom-other">
<div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) };z-index: ${ (list.length - 1) - index};`">
<template v-if="item.key == 'text'">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
@ -23,6 +23,8 @@
</div>
</template>
<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import { location_compute } from '@/utils';
// 定义 customList 中每个元素的结构
interface CustomItem {
id: string | number;
@ -93,69 +95,125 @@ const props = defineProps({
}
});
const list = ref(props.customList);
const updateLocation = (targetItem: HTMLElement, data_follow: { spacing: number }, scale: number, isX: boolean): number => {
try {
const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
if (locationValueStr == null) {
return 0;
}
const locationValue = parseFloat(locationValueStr);
if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.clientWidth < 0 : targetItem.clientHeight < 0)) return 0;
return ((locationValue + data_follow.spacing) * scale) + (isX ? targetItem.clientWidth : targetItem.clientHeight);
} catch (error) {
return 0;
}
};
const list = ref<CustomItem[]>([]);
const allSignList = ref<HTMLElement | null>(null);
const signList = ref<HTMLElement[] | null>(null);
const custom_width = ref(0);
watch(() => props.customList, async (val) => {
list.value = val;
const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
// 第一次渲染先渲染全部数据
const new_val = cloneDeep(val);
list.value = new_val;
// 判断是否有跟随的数据
const follow_list = new_val.filter(item => item.com_data?.data_follow?.id !== '');
if (follow_list.length > 0) {
await nextTick();
// 获取当前容器的宽度
if (allSignList.value) {
custom_width.value = allSignList.value.clientWidth;
}
// 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
if (signList.value && signList.value.length > 0) {
// 使用双重for循环确保每个组件都进行了刷新
signList.value.forEach((item) => {
follow_list.forEach((item1) => {
const { data_follow } = item1.com_data;
if (data_follow?.id === item.dataset.id) {
if (data_follow?.type == 'left') {
if (item1.location && item.dataset.locationX) {
const locationX = parseFloat(item.dataset.locationX);
if (!isNaN(locationX)) {
item1.location.x = ((locationX + data_follow.spacing) * props.scale) + item.clientWidth;
}
const idMap = new Map(signList.value.map(item => [item.dataset.id, item]));
list.value.forEach((item1) => {
const { data_follow } = item1.com_data;
const targetItem = idMap.get(data_follow?.id);
if (targetItem) {
// 获取自身的id信息
const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
if (data_follow?.type === 'left') {
try {
// 更新位置信息
const location_x = updateLocation(targetItem, data_follow, props.scale, true);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_width = item1.com_data.com_width;
// 如果是宽度自适应,需要重新判断一下处理逻辑
if (item1.com_data?.is_width_auto === '1' && text_item) {
item_width = text_item.clientWidth;
}
} else if (data_follow?.type == 'top') {
if (item1.location && item.dataset.locationY) {
const locationY = parseFloat(item.dataset.locationY);
if (!isNaN(locationY)) {
item1.location.y = ((locationY + data_follow.spacing) * props.scale) + item.clientWidth;
}
// 根据容器信息更新位置信息
item1.location.x = location_compute(item_width, location_x, custom_width.value);
} catch (error) {
console.log(error);
}
} else if (data_follow?.type === 'top') {
try {
// 更新位置信息
const location_y = updateLocation(targetItem, data_follow, props.scale, false);
// 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
let item_height = item1.com_data.com_height;
// 如果是高度自适应,需要重新判断一下处理逻辑
if (item1.com_data?.is_height_auto === '1' && text_item) {
item_height = text_item.clientHeight;
}
// 根据容器信息更新位置信息
item1.location.y = location_compute(item_height, location_y, props.dataHeight * props.scale);
} catch (error) {
console.log(error);
}
}
})
}
});
}
}
}, { immediate: true, deep: true });
const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
/**
* 根据给定的值、跟随数据、类型等参数计算并返回一个表示百分比或特定值的字符串
* 主要用于计算CSS样式中的尺寸属性值
*
* @param {number} val - 需要转换为百分比或特定值的原始数值
* @param {Object} data_follow - 包含跟随信息的对象，用于确定是否需要跟随其他元素
* @param {string} type - 尺寸类型，可以是'left'、'top'、'width'或'height'
* @param {string} [is_auto] - 可选参数，如果设置为'1'，则根据type和max_size计算自动样式
* @param {number} [max_size] - 可选参数，用于计算最大宽度或高度
* @returns {string} - 返回一个表示百分比或特定值的字符串，用于CSS样式
*/
const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow;
if (id !== '' && follow_type == type) {
return val + 'px';
} else {
return val * props.scale + 'px';
// 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
if (id !== '' && follow_type === type) {
return `${val}px`;
}
// 如果条件不满足，则根据比例缩放val并返回
return `${val * props.scale}px`;
} else {
if (is_auto == '1') {
if (type === 'width') {
if (max_size !== undefined && max_size > 0) {
return `auto; max-width:${max_size * props.scale}px;`;
} else {
return 'auto;';
}
} else if (type === 'height') {
if (max_size !== undefined && max_size > 0) {
return `auto; max-height:${max_size * props.scale}px;`;
// 如果is_auto设置为'1'，则根据type和max_size计算自动样式
if (is_auto === '1') {
if (type === 'width' || type === 'height') {
if (typeof max_size === 'number' && max_size >= 0) {
const scaledMaxSize = max_size * props.scale;
const autoStyle = 'auto;';
const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
} else {
return 'auto;';
}
}
} else {
return val * props.scale + 'px';
}
// 如果is_auto未设置或条件不满足，则根据比例缩放val并返回
return `${val * props.scale}px`;
}
}
};
}
const custom_height = computed(() => props.dataHeight * props.scale + 'px');

37
src/components/common/custom-module/model-text/index.vue
View File

@ -214,24 +214,27 @@ const set_count = () => {
const emits = defineEmits(['container_change']);
// 开启自定义的时候重新计算高度和宽度
const modelText = ref<HTMLElement | null>(null);
watch(() => form.value, async (value) => {
const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0 , com_width = 0, com_height = 0} = form.value;
await nextTick();
let new_width = com_width;
let new_height = com_height;
// 宽度自适应时 获取当前容器的宽度
if (is_width_auto == '1') {
new_width = modelText.value?.clientWidth || 0;
watch(() => props.value, (value) => {
if (!props.isDisplayPanel) {
const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0, com_width = 0, com_height = 0 } = value;
nextTick(() => {
let new_width = com_width;
let new_height = com_height;
// 宽度自适应时 获取当前容器的宽度
if (is_width_auto == '1') {
new_width = modelText.value?.clientWidth || 0;
}
// 高度自适应时时 获取当前容器的高度
if (is_height_auto == '1') {
new_height = modelText.value?.clientHeight || 0;
}
// 如果跟历史的宽度或者高度不同，则更新
// if (new_width !== com_width || new_height !== com_height) {
emits('container_change', new_width, new_height);
// }
});
}
// 高度自适应时时 获取当前容器的高度
if (is_height_auto == '1') {
new_height = modelText.value?.clientHeight || 0;
}
// 如果跟历史的宽度或者高度不同，则更新
if (new_width !== com_width || new_height !== com_height) {
emits('container_change', new_width, new_height)
}
}, { immediate: true, deep: true });
}, { deep: true });
</script>
<style lang="scss" scoped>

1
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -143,7 +143,6 @@
</template>
<script setup lang="ts">
import { location_compute, get_data_fields, get_history_name } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,

3
src/components/common/subscript/subscript-content.vue
View File

@ -31,5 +31,8 @@ const props = defineProps({
}
});
const form = ref(props.value);
watch(() => props.value, (val) => {
form.value = val;
}, {immediate: true, deep: true});
const is_text = computed(() => form.value.subscript_type == 'text');
</script>

3
src/components/common/subscript/subscript-styles.vue
View File

@ -110,6 +110,9 @@ const props = defineProps({
});
const form = ref(props.value);
watch(() => props.value, (val) => {
form.value = val;
}, {immediate: true, deep: true});
let clone_form = cloneDeep(props.value);
const base_list = {

25
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -20,6 +20,16 @@
</el-tooltip>
</div>
</el-form-item>
<template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
<el-form-item label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
</template>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@ -343,14 +353,13 @@ const styles = reactive(props.tabStyle);
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
};
// // 监听是否开启沉浸式
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// // 监听沉浸式开启
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.tabs_top_up = '0';
// }
// });
// 沉浸模式下是否设置安全距离
const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
watchEffect(() => {
if (is_not_general_safe_distance.value) {
form.value.is_general_safe_distance = '0';
}
});
// 标题浮起之后文章标题的颜色和字体更新
const switch_chage = (val: string | number | boolean) => {
if (val == '1') {

2
src/components/model-custom/components/custom-config/index.vue
View File

@ -132,6 +132,7 @@ const right_update = (item: any, all_diy: Array<any>) => {
// 生成随机id
key.value = Math.random().toString(36).substring(2);
// 筛选出所有已经被跟随过的组件
follow_name.value = [];
all_diy.forEach(item1 => {
if (item1.com_data?.data_follow?.id && item1.com_data.data_follow.id !== '' && !follow_name.value.includes(item1.com_data.data_follow.id)) {
follow_name.value.push(item1.com_data.data_follow.id);
@ -139,7 +140,6 @@ const right_update = (item: any, all_diy: Array<any>) => {
});
// 不是当前组件，并且没有跟随过其他组件的可以被跟随
all_diy_data.value = all_diy.filter(item1 => item.id !== item1.id && item1.com_data?.data_follow?.id == '');
console.log(all_diy_data.value);
};
const draglist = ref<diy_data | null>(null);
const emits = defineEmits(['accomplish', 'custom_edit']);

62
src/components/model-custom/components/index.vue
View File

@ -71,7 +71,7 @@
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.com_data.is_data_update" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': (diy_data.length - 1) - index }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
<div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" @container_change="(...value: [number, number]) => container_change(...value, index)"></model-text>
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" @container_change="(...value: [number, number]) => container_change(...value, index, item.id)"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :img-params="showData?.data_logo || ''"></model-image>
@ -112,7 +112,7 @@
</template>
<script setup lang="ts">
import { cloneDeep, isEmpty, property, isEqual } from 'lodash';
import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle } from '@/utils';
import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle, location_compute } from '@/utils';
import { defaultComData, isRectangleIntersecting } from "./index-default";
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
import { commonStore, DataSourceStore } from '@/store';
@ -437,15 +437,26 @@ const cancel = () => {
};
//#endregion
//#region 文本开启自适应时的处理
const container_change = (width: number, height: number, index: number) => {
console.log('1454545');
diy_data.value.forEach((item, index1) => {
if (index == index1) {
item.com_data.com_width = width;
item.com_data.com_height = height;
const container_change = (width: number, height: number, index: number, id: string) => {
let location = { x: 0, y: 0 };
// 确保 index 是有效的
if (index >= 0 && index < diy_data.value.length) {
// 使用 for 循环并在找到目标索引后立即退出
for (let i = 0; i < diy_data.value.length; i++) {
if (i === index) {
diy_data.value[i].com_data.com_width = width;
diy_data.value[i].com_data.com_height = height;
location = diy_data.value[i].location;
break; // 找到目标索引后退出循环
}
}
});
console.log(diy_data.value, '12145');
}
setTimeout(() => {
const filter_index = diy_data.value.findIndex(item => id == item.com_data?.data_follow?.id);
if (filter_index != -1) {
diy_data_handle(diy_data.value, id, location, width, height);
}
}, 0);
}
//#endregion
//#region 容器高度发生变化时的处理，拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
@ -456,7 +467,20 @@ const drag_area_height = computed(() => center_height.value + 'px');
const drag_area_width = computed(() => center_width.value + 'px');
// 头部页面显示内容
const drag_area_top_width = computed(() => center_width.value > 170 ? center_width.value + 'px' : '170px');
// 跟随的x，y重新计算
const location_handle = (item: any, location: number, type: string) => {
if (item?.com_data?.data_follow?.id != '') {
let size = item.com_data.com_height;
let max_size = center_height.value;
if (type == 'width') {
size = item.com_data.com_width;
max_size = center_width.value;
}
return location_compute(size, location, max_size);
} else {
return location;
}
};
const draggable_container = ref(true);
let data = reactive<diy_content[]>([]);
// 拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
@ -466,15 +490,15 @@ watch(() => center_height.value, () => {
draggable_container.value = false;
nextTick(() => {
// 在 DOM 中添加组件
diy_data.value = data.map((item, index) => ({
diy_data.value = data.map((item) => ({
...item,
show_tabs: '0',
location: {
x: item.location.x,
y: item.location.staging_y,
record_x: item.location.x,
record_y: item.location.staging_y,
staging_y: item.location.staging_y,
x: location_handle(item, item.location.x, 'width'),
y: location_handle(item, item.location.staging_y, 'height'),
record_x: location_handle(item, item.location.x, 'width'),
record_y: location_handle(item, item.location.staging_y, 'height'),
staging_y: location_handle(item, item.location.staging_y, 'height'),
},
com_data: {
// 规整历史数据，避免有新增字段不存在导致报错
@ -568,7 +592,7 @@ const dragEndHandle = (new_val: any, index: number) => {
// 如果有跟随的模版，则需要更新跟随的模版的位置
const index = diy_data.value.findIndex(item => old_id == item.com_data?.data_follow?.id);
if (index != -1) {
diy_data.value = diy_data_handle(diy_data.value, old_id, new_val, com_width, com_height);
diy_data_handle(diy_data.value, old_id, new_val, com_width, com_height);
}
}
const new_location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
@ -593,7 +617,7 @@ const resizingHandle = (new_location: any, key: string, index: number, type: str
// 如果有跟随的模版，则需要更新跟随的模版的位置
const index = diy_data.value.findIndex(item => old_id == item.com_data.data_follow.id);
if (index != -1) {
diy_data.value = diy_data_handle(diy_data.value, old_id, new_location, w, h);
diy_data_handle(diy_data.value, old_id, new_location, w, h);
}
}
// 对应位置的定位修改为当前更新的位置

24
src/components/model-data-tabs/model-data-tabs-content.vue
View File

@ -20,6 +20,16 @@
</el-tooltip>
</div>
</el-form-item>
<template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
<el-form-item label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
</template>
<el-form-item label="风格">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@ -334,13 +344,13 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
}
}
// #endregion
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.value.tabs_top_up = '0';
// }
// });
// 沉浸模式下是否设置安全距离
const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
watchEffect(() => {
if (is_not_general_safe_distance.value) {
form.value.is_general_safe_distance = '0';
}
});
</script>
<style lang="scss" scoped>
.content {

23
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -20,6 +20,16 @@
</el-tooltip>
</div>
</el-form-item>
<template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
<el-form-item label="安全距离">
<div class="flex-row align-c gap-10">
<el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</div>
</el-form-item>
</template>
<el-form-item label="选项卡风格">
<el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
<el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@ -316,12 +326,13 @@ const is_revise = ref(false);
const change_shop_type = () => {
is_revise.value = true;
};
// const is_immersion_model = computed(() => common_store.is_immersion_model);
// watchEffect(() => {
// if (is_immersion_model.value) {
// form.value.tabs_top_up = '0';
// }
// });
// 是否设置安全距离
const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
watchEffect(() => {
if (is_not_general_safe_distance.value) {
form.value.is_general_safe_distance = '0';
}
});
</script>
<style lang="scss" scoped>
.content {

8
src/components/page-settings/page-styles.vue
View File

@ -171,12 +171,12 @@ const header_background_type_change_event = (val: any) => {
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_general_safe_distance(false);
// common_store.set_is_immersion_model(false);
common_store.set_is_immersion_model(false);
} else {
// 没有tabs的情况下，默认开启沉浸模式
// if (!common_store.is_have_tabs) {
form.value.immersive_style = '1';
// common_store.set_is_immersion_model(true);
common_store.set_is_immersion_model(true);
// }
}
};
@ -202,13 +202,13 @@ const change_immersive_style = (val: string | number | boolean) => {
// 沉浸模式关闭的时候，安全距离关闭
form.value.general_safe_distance_value = '0';
common_store.set_is_general_safe_distance(false);
// common_store.set_is_immersion_model(false);
common_store.set_is_immersion_model(false);
} else {
// 沉浸模式开启的时候，安全距离打开
form.value.general_safe_distance_value = '1';
common_store.set_is_general_safe_distance(true);
}
// common_store.set_is_immersion_model(true);
common_store.set_is_immersion_model(true);
};
const general_safe_distance_value_change = (val: string | number | boolean) => {

2
src/config/const/article-tabs.ts
View File

@ -33,6 +33,7 @@ interface DefaultArticleTabs {
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
is_general_safe_distance: string;
tabs_top_up: string;
article_theme: string;
article_carousel_col: string;
@ -143,6 +144,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
// 对齐方式
justification: 'left',
tabs_theme: '0',
is_general_safe_distance: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [],

2
src/config/const/data-tabs.ts
View File

@ -28,6 +28,7 @@ interface DefaultProductList {
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
is_general_safe_distance: string;
tabs_top_up: string;
tabs_list: articleTabsList[];
tabs_active_index: number;
@ -148,6 +149,7 @@ const defaultProductList: DefaultProductList = {
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
is_general_safe_distance: '0',
tabs_adorn_img: [],
// 是否置顶
tabs_top_up: '0',

2
src/config/const/goods-tabs.ts
View File

@ -30,6 +30,7 @@ interface DefaultProductList {
tabs_theme: string;
tabs_adorn_icon: string;
tabs_adorn_img: uploadList[];
is_general_safe_distance: string;
tabs_top_up: string;
theme: string;
carousel_col: number;
@ -161,6 +162,7 @@ const defaultProductList: DefaultProductList = {
tabs_theme: '0',
// 选中装饰图标
tabs_adorn_icon: 'checked-smooth',
is_general_safe_distance: '0',
tabs_adorn_img: [],
// 是否置顶
tabs_top_up: '0',

2
src/utils/index.ts
View File

@ -946,6 +946,4 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
}
}
});
// 返回更新后的组件数据数组
return data;
}

12
src/views/layout/index.vue
View File

@ -125,7 +125,7 @@ const clear_data_event = () => {
form.value.tabs_data = [];
form.value.diy_data = [];
// 数据清空之后，将公共沉浸模式判断为false
// common_store.set_is_immersion_model(false);
common_store.set_is_immersion_model(false);
common_store.set_is_general_safe_distance(false);
diy_data_item.value = new_tem_form.header;
};
@ -147,9 +147,13 @@ const init = () => {
data.diy_data = data_merge(data.diy_data);
data.tabs_data = data_merge(data.tabs_data);
// 判断默认数据是否开启沉浸式,并且开启了安全距离
if (data.header.com_data.style.immersive_style == '1' && data.header.com_data.style.general_safe_distance_value == '1') {
common_store.set_is_general_safe_distance(true);
// 判断默认数据是否开启沉浸式
if (data.header.com_data.style.immersive_style === '1') {
common_store.set_is_immersion_model(true);
// 判断默认数据是否开启沉浸式,并且开启了安全距离
if (data.header.com_data.style.general_safe_distance_value == '1') {
common_store.set_is_general_safe_distance(true);
}
}
form.value = data;
} else {