feat: select 打开时自动滚动至选中的项目

src/core/helper.js

@@ -120,3 +120,17 @@ export function inputFocus (input) {
   if (!input) return
   input.focus({ preventScroll: true })
 }
+export function scrollIntoElement (container, active) {
+  const activeEl = typeof active === 'string'
+    ? container.querySelector(active)
+    : active
+  if (
+    container.scrollHeight <= container.offsetHeight || !activeEl
+  ) return
+
+  activeEl?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'nearest',
+    inline: 'start'
+  })
+}

src/modules/select/SelectLevel.jsx

@@ -1,10 +1,11 @@
-import { inject, computed, defineComponent } from 'vue'
+import { inject, computed, defineComponent, ref, nextTick } from 'vue'
 
 import DropdownContainer from '../../components/DropdownContainer'
 import SelectLevelList from './SelectLevelList'
 import SelectDropdownTrigger from './SelectDropdownTrigger'
 
 import { injectKeyCore, injectKeyBase } from '../../constants'
+import { scrollIntoElement } from '../../core/helper'
 
 export default defineComponent({
   name: 'RegionSelect',
@@ -18,23 +19,33 @@ export default defineComponent({
       customTriggerClass,
       customContainerClass
     } = inject(injectKeyBase)
+    const list = ref()
 
     const blankContent = blank ? lang.pleaseSelect : ' '
     const contentText = computed(() => (
       data.value[props.level]?.name || blankContent
     ))
 
+    const handleVisibleChange = val => {
+      if (!val) return
+
+      nextTick(() => {
+        scrollIntoElement(list.value.$el, '.selected')
+      })
+    }
+
     return () => (
       <DropdownContainer
         class='rg-select'
         disabled={disabled.value}
         custom-trigger-class={customTriggerClass}
         custom-container-class={customContainerClass}
+        onVisibleChange={handleVisibleChange}
       >{{
         trigger: () => (
           <SelectDropdownTrigger>{contentText.value}</SelectDropdownTrigger>
         ),
-        default: () => <SelectLevelList level={props.level} />
+        default: () => <SelectLevelList ref={list} level={props.level} />
       }}</DropdownContainer>
     )
   }