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

自定义跟随逻辑优化

v1.2.0
于肖磊 2025-02-21 18:46:17 +08:00
parent 08293737e1
commit 37ebdb9d45
11 changed files with 135 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,40 +2,40 @@
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="跟随组件">
<el-select v-model="data_follow.follow_id" value-key="id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="follow_id_change()">
<el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
<el-select v-model="data_follow.id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="operation_end">
<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>
<template v-if="data_follow.follow_id != ''">
<template v-if="data_follow.id != ''">
<el-form-item label="跟随方式">
<el-radio-group v-model="data_follow.follow_type" @change="operation_end">
<el-radio value="none">无</el-radio>
<el-radio-group v-model="data_follow.type" @change="operation_end">
<el-radio value="left">跟随左侧</el-radio>
<el-radio value="top">跟随上边</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="跟随间距">
<slider v-model="data_follow.follow_spacing" :max="390" @operation_end="operation_end"></slider>
<slider v-model="data_follow.spacing" :max="390" @operation_end="operation_end"></slider>
</el-form-item>
</template>
<el-form-item v-if="data_follow.follow_type != 'left'" label="X轴">
<el-form-item v-if="(data_follow.id != '' && data_follow.type != 'left') || data_follow.id == ''" label="X轴">
<slider v-model="data_location.x" :max="390" @operation_end="operation_end" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item v-if="data_follow.follow_type != 'top'" label="Y轴">
<el-form-item v-if="(data_follow.id != '' && data_follow.type != 'top') || data_follow.id == ''" label="Y轴">
<slider v-model="data_location.y" :max="1000" @operation_end="operation_end" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
</template>
<script lang="ts" setup>
import { isEmpty } from 'lodash';
const props = defineProps({
options: {
componentOptions: {
type: Array<any>,
default: () => [],
},
});
// 跟随内容
const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0 }});
const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0, is_disable_x: false, is_disable_y: false }});
// x轴 Y轴设计
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0, record_x: 0, record_y: 0, staging_y: 0 }) });
const emit = defineEmits(['operation_end']);
@ -49,12 +49,41 @@ const location_x_change = (val: number) => {
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
console.log(val);
data_location.value.record_y = val;
data_location.value.staging_y = val
};
// 跟随id发生变化时的处理
const follow_id_change = () => {
emit('operation_end');
}
watch(() => data_follow.value, (val) => {
const { spacing = 0, type = 'left', id = '' } = data_follow.value;
props.componentOptions.forEach((item: any) => {
if (item.id == id) {
const { location, com_data } = item;
const new_x = location.x + com_data.com_width + spacing;
const new_y = location.y + com_data.com_height + spacing;
// // 先解除不可移动的处理 is_disable_x true 为不可移动，false为可以拖动
// data_follow.value.is_disable_x = false;
// data_follow.value.is_disable_y = false;
if (type =='left') {
data_location.value.x = new_x;
data_location.value.record_x = new_x;
// setTimeout(() => {
// // // 等赋值完成之后再放开定位处理
// data_follow.value.is_disable_x = true;
// data_follow.value.is_disable_y = false;
// }, 0);
} else if (type =='top') {
data_location.value.y = new_y;
data_location.value.record_y = new_y;
data_location.value.staging_y = new_y
// setTimeout(() => {
// // // 等赋值完成之后再添加禁止移动处理
// data_follow.value.is_disable_x = false;
// data_follow.value.is_disable_y = true;
// }, 0);
}
}
});
}, {immediate: true, deep: true });
</script>

6
src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
@ -45,6 +45,10 @@ const props = defineProps({
configLoop: {
type: String,
default: '1'
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值

6
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
@ -107,6 +107,10 @@ const props = defineProps({
type: Array<any>,
default: () => [],
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值
const state = reactive({

6
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">图片设置</div>
@ -81,6 +81,10 @@ const props = defineProps({
type: Array<any>,
default: () => [],
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值
const state = reactive({

6
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container class="">
<div class="mb-12">线条设置</div>
@ -57,6 +57,10 @@ const props = defineProps({
type: Array<any>,
default: () => [],
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值
const state = reactive({

6
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
@ -79,6 +79,10 @@ const props = defineProps({
type: Array<any>,
default: () => [],
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值
const state = reactive({

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

@ -1,7 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="80">
<custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
<custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
@ -153,6 +153,10 @@ const props = defineProps({
type: Array<any>,
default: () => [],
},
componentOptions: {
type: Array<any>,
default: () => [],
}
});
// 默认值
const state = reactive({
@ -233,11 +237,11 @@ const is_height_auto_change = (val: string | number | boolean) => {
watch(
diy_data,
(val) => {
diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
// diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
// diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
// diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
// diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
// diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }

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

@ -6,22 +6,22 @@
<!-- 右侧配置区域 -->
<div class="settings">
<template v-if="diy_data.key === 'img'">
<model-image-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-image-style>
<model-image-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-image-style>
</template>
<template v-else-if="diy_data.key == 'text'">
<model-text-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-text-style>
<model-text-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-text-style>
</template>
<template v-else-if="diy_data.key == 'auxiliary-line'">
<model-lines-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-lines-style>
<model-lines-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-lines-style>
</template>
<template v-else-if="diy_data.key == 'icon'">
<model-icon-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-icon-style>
<model-icon-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-icon-style>
</template>
<template v-else-if="diy_data.key == 'panel'">
<model-panel-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-panel-style>
<model-panel-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-panel-style>
</template>
<template v-else-if="diy_data.key == 'custom-group' && configType == 'custom'">
<model-custom-group-style :key="key" v-model:height="center_height" :config-loop="configLoop" :options="configLoop == '1' ? options : []" :value="diy_data" @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
<model-custom-group-style :key="key" v-model:height="center_height" :config-loop="configLoop" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
</template>
<template v-else>
<div class="w h flex align-c bg-f">
@ -113,6 +113,7 @@ const dialogVisible = defineModel('visible', { type: Boolean, default: false });
//#region 自定义编辑的内部处理逻辑
const diy_data = ref<diy>({
key: '',
id: '',
location: {
x: 0,
y: 0,
@ -124,10 +125,13 @@ const diy_data = ref<diy>({
});
// 唯一标识
const key = ref('');
const right_update = (item: any) => {
const all_diy_data = ref<Array<any>>([]);
const right_update = (item: any, all_diy: Array<any>) => {
diy_data.value = item;
// 生成随机id
key.value = Math.random().toString(36).substring(2);
// 不是当前组件，并且没有跟随过其他组件的可以被跟随
all_diy_data.value = all_diy.filter(item1 => item.id !== item1.id && item1.com_data.data_follow.id == '');
};
const draglist = ref<diy_data | null>(null);
const emits = defineEmits(['accomplish', 'custom_edit']);

12
src/components/model-custom/components/index-default.ts
View File

@ -25,7 +25,7 @@ const text_com_data = {
is_height_auto: '0',
max_width: 150,
max_height: 17,
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
is_rich_text: '0',
is_up_down: '1',
text_color: '#000',
@ -82,7 +82,7 @@ const img_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
img_radius: {
radius: 0,
radius_top_left: 0,
@ -131,7 +131,7 @@ const line_com_data = {
type: '', // 条件类型
value: '', // 值
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
animation_style: {
type: 'none',
number: 'infinite',
@ -154,7 +154,7 @@ const icon_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
is_rich_icon: '0',
is_up_down: '1',
icon_color: '#000',
@ -205,7 +205,7 @@ const panel_com_data = {
id: '',
option: {}
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
icon_rotate: 0,
background_img_style: '2',
background_img: [],
@ -243,7 +243,7 @@ const custom_group_com_data = {
id: '',
option: []
},
data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
// 条件判断
condition: {
field: '', // 字段id

5
src/components/model-custom/components/index.ts
View File

@ -7,9 +7,11 @@ interface location {
}
interface diy {
key: string,
id: string,
location: location,
com_data: any,
}
type follow = { id: string, type: string, spacing: number }
interface diy_content extends diy{
com_width: number,
com_height: number,
@ -19,7 +21,8 @@ interface diy_content extends diy{
is_enable: string,
src: string,
is_hot: string,
id: string
id: string,
data_follow: follow
}
interface expose {

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

@ -68,7 +68,7 @@
<div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#f00f00" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
<!-- @mouseover="on_choose(index)" -->
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" 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')">
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.location.x + item.location.y" 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>
@ -323,7 +323,7 @@ const del = (index: null | number) => {
}
set_show_tabs(new_index);
} else {
emits('rightUpdate', {});
emits('rightUpdate', {}, diy_data.value);
}
} else {
diy_data.value.splice(index, 1);
@ -391,7 +391,7 @@ const set_show_tabs = (index: number) => {
item.show_tabs = '1';
// 滚动到指定位置
scroll();
emits('rightUpdate', item);
emits('rightUpdate', item, diy_data.value);
}
});
};
@ -427,7 +427,7 @@ const cancel = () => {
item.show_tabs = '0';
});
select_index.value = null;
emits('rightUpdate', {});
emits('rightUpdate', {}, diy_data.value);
};
//#endregion
//#region 文本开启自适应时的处理
@ -488,7 +488,7 @@ watch(() => center_height.value, () => {
},
}));
// 容器高度变化时，组件不绑定右侧数据
emits('rightUpdate', {});
emits('rightUpdate', {}, diy_data.value);
draggable_container.value = true;
});
},{ immediate:true, deep: true });
@ -552,8 +552,36 @@ const drop = (event: any) => {
//#endregion
//#region 区域内拖拽显示
const dragEndHandle = (item: any, index: number) => {
const old_location = diy_data.value[index].location;
const new_location = { x: item.x, y: item.y, record_x: item.x, record_y: item.y, staging_y: item.y };
const old_location = cloneDeep(diy_data.value[index].location);
const { data_follow, com_width, com_height} = diy_data.value[index].com_data;
let new_x = old_location.x;
let new_y = old_location.y;
// 如果是跟随的模版,根据选中的内容 x或者y不变
if (data_follow.id != '') {
if (data_follow.type == 'left') {
new_y = item.y;
} else if (data_follow.type == 'top') {
new_x = item.x;
}
} else {
diy_data.value.forEach((item1: any) => {
const { id = '', type = 'left', spacing = 0 } = item1.com_data.data_follow;
// 判断当前组件是否被其他组件跟随
if (item.id == id) {
const new_location_x = old_location.x + com_width + spacing;
const new_location_y = old_location.y + com_height + spacing;
if (type =='left') {
item1.location.x = new_location_x;
item1.location.record_x = new_location_x;
} else if (type =='top') {
item1.location.y = new_location_y;
item1.location.record_y = new_location_y;
item1.location.staging_y = new_location_y;
}
}
});
}
const new_location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
diy_data.value[index].location = new_location;
// 对数组进行比较，确定跟之前的是否有变化
if (!isEqual(old_location, new_location)) {
@ -658,7 +686,7 @@ const end_drag = (event: MouseEvent) => {
});
// 清除选中
select_index.value = null;
emits('rightUpdate', {});
emits('rightUpdate', {}, diy_data.value);
}
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
rect_end.value = { x: 0, y: 0, width: 0, height: 0 };