diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx index 7c1a273ea..077700568 100644 --- a/packages/vant/src/cascader/Cascader.tsx +++ b/packages/vant/src/cascader/Cascader.tsx @@ -17,6 +17,9 @@ import { type Numeric, } from '../utils'; +// Composables +import { useRefs } from '../composables/use-refs'; + // Components import { Tab } from '../tab'; import { Tabs } from '../tabs'; @@ -53,6 +56,8 @@ export default defineComponent({ setup(props, { slots, emit }) { const tabs = ref([]); const activeTab = ref(0); + const [selectedElementRefs, setSelectedElementRefs] = + useRefs(); const { text: textKey, @@ -222,6 +227,7 @@ export default defineComponent({ return (
  • ); + const scrollIntoView = (el: HTMLElement) => { + const scrollParent = el.parentElement; + + if (scrollParent) { + scrollParent.scrollTop = + el.offsetTop - (scrollParent.offsetHeight - el.offsetHeight) / 2; + } + }; + updateTabs(); + watch(activeTab, (value) => { + const el = selectedElementRefs.value[value]; + if (el) scrollIntoView(el); + }); watch(() => props.options, updateTabs, { deep: true }); watch( () => props.modelValue,