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

自定义代码逻辑优化

v1.2.0
于肖磊 2024-12-25 18:10:06 +08:00
parent 1883237799
commit 7d165b815c
9 changed files with 45 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/base/slider/index.vue
View File

@ -1,11 +1,6 @@
<template>
<div class="slider w">
<template v-if="max <= 10">
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" show-stops />
</template>
<template v-else>
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" />
</template>
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" :show-stops="max <= 10" />
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max"></input-number>
</div>
</template>

15
src/components/common/custom-module/custom-location/index.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="data_location.x" :max="390"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="data_location.y" :max="1000"></slider>
</el-form-item>
</card-container>
</template>
<script lang="ts" setup>
const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0 }) });
</script>

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
@ -26,7 +18,6 @@
<custom-tabs-content :value="form" @custom_edit="custom_edit"></custom-tabs-content>
</el-tab-pane>
<el-tab-pane label="样式设置" name="styles">
{{ diy_data.location.x }}
<model-custom-styles :value="form.data_style" :content="form" :is-floating-up="false"></model-custom-styles>
</el-tab-pane>
</el-tabs>
@ -46,15 +37,15 @@ const props = defineProps({
},
});
// 默认值
const tabs_name = 'content';
const center_height = defineModel('height', { type: Number, default: 0 });
const state = reactive({
diy_data: props.value,
});
// 如果需要解构，确保使用toRefs
const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const tabs_name = 'content';
const center_height = defineModel('height', { type: Number, default: 0 });
//#region 自定义组的编辑功能
const emit = defineEmits(['custom_edit']);
const custom_edit = () => {
const { custom_list, com_width, custom_height } = form.value;
@ -62,15 +53,8 @@ const custom_edit = () => {
const width = form.value.data_source_direction != 'vertical-scroll' ? com_width / form.value.data_source_carousel_col : com_width; // 可拖拽区域的宽度
emit('custom_edit', diy_data.value.id, custom_list, width, custom_height);
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
//# endregion
//#region 位置计算
// 监听数据变化
watch(
diy_data,
@ -85,6 +69,7 @@ watch(
},
{ immediate: true, deep: true }
);
//#endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
@ -148,17 +140,8 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
//#region 位置计算
// 监听数据变化
watch(
diy_data,
(val) => {
@ -172,6 +155,7 @@ watch(
},
{ immediate: true, deep: true }
);
// #endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">图片设置</div>
@ -119,17 +111,8 @@ const img_link_change = (key: string) => {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
}
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
//#region 位置计算
// 监听数据变化
watch(
diy_data,
(val) => {
@ -152,6 +135,7 @@ watch(
},
{ immediate: true, deep: true }
);
// #endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container class="">
<div class="mb-12">线条设置</div>
@ -66,16 +58,8 @@ const { diy_data } = toRefs(state);
const form = ref(diy_data.value.com_data);
const center_height = defineModel("height", { type: Number, default: 0 })
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
//#region 位置计算
// 监听数据变化
watch(diy_data, (val) => {
let width = 0;
let height = 0;
@ -99,6 +83,7 @@ watch(diy_data, (val) => {
form.value.staging_height = height;
}, {immediate: true, deep: true});
// #endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
@ -102,16 +94,6 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
// 数据链接字段切换时，更新另外一个数据
const img_link_change = (key: string) => {
if (key == '2') {
@ -121,7 +103,8 @@ const img_link_change = (key: string) => {
form.value.data_source_link_field = get_data_fields([], 'link', '');
}
}
// #region 位置计算
// 监听数据变化
watch(
diy_data,
(val) => {
@ -130,11 +113,11 @@ watch(
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 }
);
// #endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -1,15 +1,7 @@
<template>
<div class="w h bg-f">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">定位设置</div>
<el-form-item label="X轴">
<slider v-model="diy_data.location.x" :max="390" @update:model-value="location_x_change"></slider>
</el-form-item>
<el-form-item label="Y轴">
<slider v-model="diy_data.location.y" :max="1000" @update:model-value="location_y_change"></slider>
</el-form-item>
</card-container>
<custom-location v-model="diy_data.location"></custom-location>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">文本设置</div>
@ -193,20 +185,11 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
// x轴变化时，更新记录的位置
const location_x_change = (val: number) => {
diy_data.value.location.record_x = val;
}
// y轴变化时，更新记录的位置
const location_y_change = (val: number) => {
diy_data.value.location.record_y = val;
diy_data.value.location.staging_y = val;
}
// #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);
@ -216,6 +199,7 @@ watch(
},
{ immediate: true, deep: true }
);
// #endregion
</script>
<style lang="scss" scoped>
.border-style-item {

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

@ -205,6 +205,7 @@ const on_sort = (item: SortableEvent) => {
};
//#endregion
//#region 中间区域的处理逻辑
// 数据只需要一次更新即可，避免多次更新导致数据不一致
const diy_data = toRef(props.list);
// 因为容器变更的话，需要重新计算高度，所以不能默认选中第一个
// onMounted(() => {
@ -669,7 +670,7 @@ const start_drag_area_box = (index: number, event: MouseEvent) => {
// 遍历对象,包裹在区域内部的拖拽距离更新
diy_data.value.forEach(item => {
if (item.is_hot == '1') { // 只更新交集和包裹中的数据
let { record_x, record_y} = cloneDeep(item.location);
let { record_x, record_y } = cloneDeep(item.location);
item.location.x = Math.max(0, record_x + move_x);
item.location.y = Math.max(0, record_y + move_y);
}
@ -727,7 +728,6 @@ const start_drag_btn = (index: number, event: MouseEvent, type: string) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
if (drag_box_scale_bool.value) {
if (!imgBoxRef.value) return;
switch (type) {
case 'br':
// 下右