From 7c52f083db30f7e68c3e10a88cbc47d41cf9de20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=97=E5=A4=A7?= <ufo025174@gmail.com>
Date: Mon, 25 Mar 2024 14:24:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(VirtualScroll):=20=E8=99=9A=E6=8B=9F?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=A2=9E=E5=8A=A0=E6=BB=9A=E5=8A=A8=E5=88=B0?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8,=20=E5=BA=95=E9=83=A8,=20=E6=8C=87=E5=AE=9A?=
 =?UTF-8?q?=E9=A1=B9=E6=96=B9=E6=B3=95=20(#3687)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VirtualScroll/src/VirtualScroll.vue       | 34 ++++++++++++++++++-
 src/design/ant/input.less                     |  3 +-
 src/views/demo/comp/scroll/VirtualScroll.vue  | 28 +++++++++++++--
 3 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/components/VirtualScroll/src/VirtualScroll.vue b/src/components/VirtualScroll/src/VirtualScroll.vue
index 255100327..12080cb70 100644
--- a/src/components/VirtualScroll/src/VirtualScroll.vue
+++ b/src/components/VirtualScroll/src/VirtualScroll.vue
@@ -52,7 +52,7 @@
   export default defineComponent({
     name: 'VirtualScroll',
     props,
-    setup(props, { slots }) {
+    setup(props, { slots, expose }) {
       const wrapElRef = ref<HTMLDivElement | null>(null);
       const state = reactive({
         first: 0,
@@ -128,6 +128,31 @@
         state.last = getLast(state.first);
       }
 
+      function scrollToTop() {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return;
+        }
+        wrapEl.scrollTop = 0;
+      }
+
+      function scrollToBottom() {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return;
+        }
+        wrapEl.scrollTop = wrapEl.scrollHeight;
+      }
+
+      function scrollToItem(index: number) {
+        const wrapEl = unref(wrapElRef);
+        if (!wrapEl) {
+          return;
+        }
+        const i = index - 1 > 0 ? index - 1 : 0;
+        wrapEl.scrollTop = i * unref(getItemHeightRef);
+      }
+
       function renderChildren() {
         const { items = [] } = props;
         return items.slice(unref(getFirstToRenderRef), unref(getLastToRenderRef)).map(genChild);
@@ -143,6 +168,13 @@
         );
       }
 
+      expose({
+        wrapElRef,
+        scrollToTop,
+        scrollToItem,
+        scrollToBottom,
+      });
+
       onMounted(() => {
         state.last = getLast(0);
         nextTick(() => {
diff --git a/src/design/ant/input.less b/src/design/ant/input.less
index 8245fb724..18a133ae7 100644
--- a/src/design/ant/input.less
+++ b/src/design/ant/input.less
@@ -4,8 +4,7 @@
 .ant-input {
   &-number,
   &-number-group-wrapper {
-    width: 100% !important;
-    min-width: 110px;
+    width: 100%;
     max-width: 100%;
   }
 }
diff --git a/src/views/demo/comp/scroll/VirtualScroll.vue b/src/views/demo/comp/scroll/VirtualScroll.vue
index 69697e492..c3b146fd4 100644
--- a/src/views/demo/comp/scroll/VirtualScroll.vue
+++ b/src/views/demo/comp/scroll/VirtualScroll.vue
@@ -1,8 +1,26 @@
 <template>
   <PageWrapper class="virtual-scroll-demo">
     <Divider>基础滚动示例</Divider>
+    <div class="text-center mb-4">
+      <a-button @click="vScrollRef?.scrollToTop()">滚动到顶部</a-button>
+      <a-button @click="vScrollRef?.scrollToBottom()" class="mx-2">滚动到底部</a-button>
+      <a-button @click="vScrollRef?.scrollToItem(scrollToItemIndex)"
+        >滚动到第
+        <input-number
+          v-model:value="scrollToItemIndex"
+          class="!w-60px mx-1"
+          :min="1"
+          :max="data.length"
+          :precision="0"
+          size="small"
+          :controls="false"
+          @keydown.enter="vScrollRef?.scrollToItem(scrollToItemIndex)"
+        />
+        条
+      </a-button>
+    </div>
     <div class="virtual-scroll-demo-wrap">
-      <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
+      <VScroll :itemHeight="41" :items="data" :height="300" :width="300" ref="vScrollRef">
         <template #default="{ item }">
           <div class="virtual-scroll-demo__item">
             {{ item.title }}
@@ -24,9 +42,13 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { VScroll } from '@/components/VirtualScroll';
-  import { Divider } from 'ant-design-vue';
   import { PageWrapper } from '@/components/Page';
+  import { VScroll } from '@/components/VirtualScroll';
+  import { Divider, InputNumber } from 'ant-design-vue';
+  import { ref } from 'vue';
+
+  const vScrollRef = ref<typeof VScroll>();
+  const scrollToItemIndex = ref(1000);
 
   const data = (() => {
     const arr: any[] = [];