自定义代码逻辑优化

src/components/base/slider/index.vue

@@ -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="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>
         <input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max"></input-number>
     </div>
 </template>

src/components/common/custom-module/custom-location/index.vue

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

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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';
+//#region 自定义组的编辑功能  
-const center_height = defineModel('height', { type: Number, default: 0 });
-
 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轴变化时，更新记录的位置
+//# endregion
-const location_x_change = (val: number) => {
+//#region 位置计算
-    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;
-}
 // 监听数据变化
 watch(
     diy_data,
@@ -85,6 +69,7 @@ watch(
     },
     { immediate: true, deep: true }
 );
+//#endregion
 </script>
 <style lang="scss" scoped>
 .border-style-item {

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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();
 };
-
+//#region 位置计算
-// 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;
-}
-
 watch(
     diy_data,
     (val) => {
@@ -172,6 +155,7 @@ watch(
     },
     { immediate: true, deep: true }
 );
+// #endregion
 </script>
 <style lang="scss" scoped>
 .border-style-item {

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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', '');
     }
 }
-
+//#region 位置计算
-// 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;
-}
-
 watch(
     diy_data,
     (val) => {
@@ -152,6 +135,7 @@ watch(
     },
     { immediate: true, deep: true }
 );
+// #endregion
 </script>
 <style lang="scss" scoped>
 .border-style-item {

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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轴变化时，更新记录的位置
+//#region 位置计算
-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;
-}
-
 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 {

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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 {

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

@@ -1,15 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <card-container>
+            <custom-location v-model="diy_data.location"></custom-location>
-                <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>
             <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轴变化时，更新记录的位置
+// #region 位置计算
-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;
-}
-
 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 {

src/components/model-custom/components/index.vue

@@ -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':
                     // 下右