@tmagic/form 1.2.4 → 1.2.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.4",
+  "version": "1.2.6",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.2.4",
-    "@tmagic/utils": "1.2.4",
+    "@tmagic/design": "1.2.6",
+    "@tmagic/utils": "1.2.6",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.37"

package/src/fields/Select.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup name="MFormSelect">
-import { inject, nextTick, onBeforeMount, onMounted, Ref, ref, watchEffect } from 'vue';
+import { inject, onBeforeMount, Ref, ref, watch, watchEffect } from 'vue';
 
 import { TMagicSelect } from '@tmagic/design';
 
@@ -331,26 +331,36 @@ if (typeof props.config.options === 'function') {
   });
 }
 
-props.config.remote &&
-  onMounted(async () => {
-    await nextTick();
-    tMagicSelect.value?.scrollbarWrap?.addEventListener('scroll', async (e: Event) => {
-      const el = e.currentTarget as HTMLDivElement;
-      if (moreLoadingVisible.value) {
+if (props.config.remote) {
+  const unWacth = watch(
+    () => tMagicSelect.value?.scrollbarWrap,
+    (scrollbarWrap) => {
+      if (!scrollbarWrap) {
         return;
       }
-      if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) {
-        return;
-      }
-      if (total.value <= options.value.length) {
-        return;
-      }
-      moreLoadingVisible.value = true;
-      pgIndex.value += 1;
-      options.value = await getOptions();
-      moreLoadingVisible.value = false;
-    });
-  });
+      scrollbarWrap.addEventListener('scroll', async (e: Event) => {
+        const el = e.currentTarget as HTMLDivElement;
+        if (moreLoadingVisible.value) {
+          return;
+        }
+        if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) {
+          return;
+        }
+        if (total.value <= options.value.length) {
+          return;
+        }
+        moreLoadingVisible.value = true;
+        pgIndex.value += 1;
+        options.value = await getOptions();
+        moreLoadingVisible.value = false;
+      });
+      unWacth();
+    },
+    {
+      immediate: true,
+    },
+  );
+}
 
 const popperClass = mForm?.popperClass;