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

更新宽度变化时显示的位置

v1.2.0
于肖磊 2025-02-26 16:28:18 +08:00
parent 51fde32ec4
commit c02e08229d
8 changed files with 219 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,7 @@
</template>
<script lang="ts" setup>
import { get_container_location } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
componentOptions: {
@ -68,23 +69,9 @@ const data_follow_id_change = (val: string) => {
// 跟随id发生变化时的处理
watch(() => data_follow.value, (val) => {
const { spacing = 0, type = 'left', id = '' } = val;
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;
} else if (type =='top') {
data_location.value.y = new_y;
data_location.value.record_y = new_y;
data_location.value.staging_y = new_y
}
}
});
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, data_location.value.x, data_location.value.y);
// 更新位置
data_location.value = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
}, {immediate: true, deep: true });
</script>

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

@ -6,10 +6,10 @@
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="390" @operation_end="operation_end"></slider>
<slider v-model="form.com_width" :max="390" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
@ -31,7 +31,7 @@
</div>
</template>
<script setup lang="ts">
import { get_history_name, location_compute } from '@/utils';
import { get_container_location, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -87,20 +87,29 @@ const operation_end = () => {
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
// 容器位置计算
diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
}
// 组件大小变化触发事件
const container_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
// 监听数据变化
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);
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }
);
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
//#endregion
</script>
<style lang="scss" scoped>

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

@ -54,10 +54,10 @@
<card-container>
<div class="mb-12">容器设置</div>
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
@ -96,7 +96,7 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
import { pick, isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -158,20 +158,30 @@ const operation_end = () => {
emit('operation_end', get_history_name(diy_data.value));
};
//#region 位置计算
// 监听数据变化
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);
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
}
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }
);
// 组件大小变化触发事件
const container_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
// 监听数据变化
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
// #endregion
</script>
<style lang="scss" scoped>

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

@ -25,10 +25,10 @@
<radius :value="form.img_radius" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="图片宽度">
<slider v-model="form.img_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.img_width" :max="1000" @operation_end="img_size_change"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.img_height" :max="1000" @operation_end="img_size_change"></slider>
</el-form-item>
<el-form-item label="旋转角度">
<slider v-model="form.img_rotate" :max="1000" @operation_end="operation_end"></slider>
@ -62,7 +62,7 @@
<radius :value="form.border_radius" @operation_end="operation_end"></radius>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="img_size_change"></slider>
</el-form-item>
</template>
</card-container>
@ -70,7 +70,7 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -123,30 +123,39 @@ const emit = defineEmits(['operation_end']);
const operation_end = () => {
emit('operation_end', get_history_name(diy_data.value));
};
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
let width = form.value.img_width;
let height = form.value.img_height;
if (form.value.border_show == '1') {
width += form.value.border_size * 2;
height += form.value.border_size * 2;
}
diy_data.value.location.x = location_compute(width, location.x, 390);
diy_data.value.location.y = location_compute(height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(height, location.staging_y, center_height.value);
form.value.com_width = width;
form.value.com_height = height;
form.value.staging_height = height;
}
const img_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
//#region 位置计算
// 监听数据变化
watch(
diy_data,
(val) => {
let width = form.value.img_width;
let height = form.value.img_height;
if (form.value.border_show == '1') {
width += form.value.border_size * 2;
height += form.value.border_size * 2;
}
diy_data.value.location.x = location_compute(width, val.location.x, 390);
diy_data.value.location.y = location_compute(height, val.location.y, center_height.value);
diy_data.value.location.record_x = location_compute(width, val.location.record_x, 390);
diy_data.value.location.record_y = location_compute(height, val.location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(height, val.location.staging_y, center_height.value);
form.value.com_width = width;
form.value.com_height = height;
form.value.staging_height = height;
},
{ immediate: true, deep: true }
);
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
// #endregion
</script>
<style lang="scss" scoped>

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

@ -25,10 +25,10 @@
</el-radio-group>
</el-form-item>
<el-form-item :label="form.line_settings === 'horizontal' ? '线条宽度' : '线条高度'">
<slider v-model="form.line_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.line_width" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="线条粗细">
<slider v-model="form.line_size" :min="1" :max="100" @operation_end="operation_end"></slider>
<slider v-model="form.line_size" :min="1" :max="100" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="线条颜色">
<color-picker v-model="form.line_color" @operation_end="operation_end"></color-picker>
@ -45,7 +45,7 @@
</div>
</template>
<script setup lang="ts">
import { get_history_name, location_compute } from '@/utils';
import { get_container_location, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
@ -83,7 +83,7 @@ const operation_end = () => {
//#region 位置计算
// 监听数据变化
watch(diy_data, (val) => {
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
let width = 0;
let height = 0;
if (form.value.line_settings === 'horizontal') {
@ -94,18 +94,31 @@ watch(diy_data, (val) => {
height = form.value.line_width;
}
diy_data.value.location.x = location_compute(width, val.location.x, 390);
diy_data.value.location.y = location_compute(height, val.location.y, center_height.value);
diy_data.value.location.x = location_compute(width, location.x, 390);
diy_data.value.location.y = location_compute(height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(width, val.location.record_x, 390);
diy_data.value.location.record_y = location_compute(height, val.location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(height, val.location.staging_y, center_height.value);
diy_data.value.location.record_x = location_compute(width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(height, location.staging_y, center_height.value);
form.value.com_width = width;
form.value.com_height = height;
form.value.staging_height = height;
}, {immediate: true, deep: true});
}
// 组件大小变化触发事件
const container_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
// 监听数据变化
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
// #endregion
</script>
<style lang="scss" scoped>

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

@ -26,10 +26,10 @@
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item> -->
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="容器高度">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
@ -60,7 +60,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="container_size_change"></slider>
</el-form-item>
</template>
</card-container>
@ -68,7 +68,7 @@
</div>
</template>
<script setup lang="ts">
import { get_data_fields, get_history_name, location_compute } from '@/utils';
import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -119,18 +119,28 @@ const operation_end = () => {
};
// #region 位置计算
// 监听数据变化
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);
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }
);
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
}
// 组件大小变化触发事件
const container_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
// 监听数据变化
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
// #endregion
</script>
<style lang="scss" scoped>

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

@ -90,19 +90,19 @@
<el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="is_width_auto_change"/>
</el-form-item>
<el-form-item v-if="form.is_width_auto == '1'" label="最大宽度">
<slider v-model="form.max_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.max_width" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item v-else label="容器宽度">
<slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="高度自适应">
<el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="is_height_auto_change"/>
</el-form-item>
<el-form-item v-if="form.is_height_auto == '1'" label="最大高度">
<slider v-model="form.max_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.max_height" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item v-else label="容器高度">
<slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
<slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
</el-form-item>
<el-form-item label="背景颜色">
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
@ -133,7 +133,7 @@
</el-radio-group>
</el-form-item>
<el-form-item label="边框粗细">
<slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
<slider v-model="form.border_size" :max="100" @operation_end="container_size_change"></slider>
</el-form-item>
</template>
</card-container>
@ -142,7 +142,7 @@
</div>
</template>
<script setup lang="ts">
import { location_compute, get_data_fields, get_history_name } from '@/utils';
import { location_compute, get_data_fields, get_history_name, get_container_location } from '@/utils';
const props = defineProps({
value: {
type: Object,
@ -237,18 +237,28 @@ const is_height_auto_change = (val: string | number | boolean) => {
};
// #region 位置计算
// 监听数据变化
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);
form.value.staging_height = form.value.com_height;
},
{ immediate: true, deep: true }
);
const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
form.value.staging_height = form.value.com_height;
}
// 组件大小变化触发事件
const container_size_change = () => {
const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
// 获取新的位置
const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
// 重新更新位置信息
diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
size_location_change(diy_data.value.location);
operation_end();
}
// 监听数据变化
watch(() => diy_data.value, (val) => {
size_location_change(val.location);
},{ immediate: true, deep: true });
// #endregion
</script>
<style lang="scss" scoped>

50
src/utils/index.ts
View File

@ -946,4 +946,54 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
}
}
});
}
/**
* 接口Item定义了具有特定属性的项的结构
* 包含项的唯一标识id，项的位置location，以及项的组件数据com_data
*/
interface Item {
id: string;
location: { x: number; y: number };
com_data: { com_width: number; com_height: number };
}
/**
* 计算容器的位置
* 根据提供的项列表、特定项的ID、位置类型、间距以及初始位置坐标，计算出新容器的位置
*
* @param list 项的列表，每个项都符合Item接口的结构
* @param id 需要计算位置的项的ID
* @param type 定义了计算位置的类型，可以是'left'（计算左侧位置）或'top'（计算顶部位置）
* @param spacing 项之间的间距
* @param locationx 容器的初始x轴位置
* @param locationy 容器的初始y轴位置
* @returns 返回一个包含新x和y坐标的对象，根据type参数的不同，相应的坐标将被计算更新
*/
export const get_container_location = (list: Item[], id: string, type: 'left' | 'top', spacing: number, locationx: number, locationy: number) => {
let x = locationx;
let y = locationy;
// 遍历项列表，寻找匹配给定ID的项
for (const item of list) {
if (item.id === id) {
// 解构获取项的位置和组件数据，如果没有提供则使用默认值
const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 } } = item;
// 计算新的x和y坐标，根据组件的宽度/高度和间距
const new_x = location.x + com_data.com_width + spacing;
const new_y = location.y + com_data.com_height + spacing;
// 根据type参数更新x或y坐标
if (type === 'left') {
x = new_x;
} else if (type === 'top') {
y = new_y;
}
break; // 找到匹配项后即停止遍历
}
}
// 返回更新后的坐标
return { x, y };
}