修改滚动条位置

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

@@ -5,9 +5,9 @@
             <el-collapse v-model="activeNames">
                 <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
                     <div class="component flex-row flex-wrap">
-                        <div v-for="item in com.item" :key="item.key" class="draggable item" draggable="true" @dragstart="dragStart(item, $event)" @dragend="dragEnd">
-                            <div class="siderbar-item flex-col jc-c align-c gap-4">
-                                <img class="img radius-xs" :src="`/src/assets/images/custom/${item.key}.png`" />
+                        <div v-for="item in com.item" :key="item.key" class="item">
+                            <div class="siderbar-item flex-col jc-c align-c gap-4 draggable" draggable="true" @dragstart="dragStart(item, $event)" @dragend="dragEnd">
+                                <img class="img radius-xs" :src="url_computer(item.key)" />
                                 <div>{{ item.name }}</div>
                             </div>
                         </div>
@@ -169,6 +169,10 @@ const components = reactive([
         ],
     },
 ]);
+const url_computer = (name: string) => {
+    const new_url = ref(new URL(`../../../assets/images/custom/${name}.png`, import.meta.url).href).value;
+    return new_url;
+};
 //#endregion
 //#region 中间区域的处理逻辑
 const diy_data = toRef(props.list);
@@ -359,6 +363,9 @@ const resizingHandle = (new_location: any, key: string, index: number) => {
     }
 };
 //#endregion
+defineExpose({
+    diy_data,
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -14,7 +14,7 @@
         </el-form>
         <Dialog ref="dialog" @accomplish="accomplish">
             <div class="flex-row h w">
-                <DragIndex :key="dragkey" v-model:height="center_height" :list="custom_list" @right-update="right_update"></DragIndex>
+                <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :list="custom_list" @right-update="right_update"></DragIndex>
                 <div class="settings">
                     <template v-if="diy_data.key === 'img'">
                         <model-image-style :key="key" v-model:height="center_height" :value="diy_data"></model-image-style>
@@ -42,7 +42,7 @@ const props = defineProps({
 });
 
 const dialog = ref<expose | null>(null);
-
+const draglist = ref<diy_data | null>(null);
 const form = reactive(props.value);
 // 弹出框里的内容
 let custom_list = reactive([]);
@@ -82,7 +82,11 @@ const custom_edit = () => {
 };
 
 const accomplish = () => {
-    form.custom_list = custom_list;
+    if (!draglist.value) {
+        return;
+    } else {
+        form.custom_list = draglist.value.diy_data;
+    }
     form.height = center_height.value;
 };
 </script>

src/layout/components/main/index.vue

@@ -28,7 +28,7 @@
                 <!-- 页面设置 -->
                 <page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
                 <!-- 拖拽区 -->
-                <div class="model-drag">
+                <div class="model-drag" ref="scrollTop">
                     <div class="seat" style="background: #fff"></div>
                     <div class="model-wall" :style="content_style">
                         <div :style="'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
@@ -434,6 +434,23 @@ const set_show_tabs = (index: number) => {
         }
     });
 };
+const scrollTop = ref<HTMLElement | null>(null);
+const activeCard = ref<HTMLElement | null>(null);
+// 滚动到指定位置
+const scroll = () => {
+    nextTick(() => {
+        // 获取当前选中的内容
+        activeCard.value = document.querySelector(".plug-in-table.plug-in-border");
+        if (activeCard.value) {
+            // 获取选中内容的位置
+            const scrollY = activeCard.value.offsetTop;
+            if (scrollTop.value) {
+                // 选中的滚动到指定位置
+                scrollTop.value.scrollTo({ top: scrollY - 200, behavior: 'smooth' });
+            }
+        }
+    });
+};
 //#endregion
 //#region 页面设置 导出 导入
 const content_style = ref('');