blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Cascader): scroll the selected option into view when switching tabs (#11869)

Browse Source
This commit is contained in:
inottn 2023-05-17 22:30:06 +08:00 committed by GitHub
parent ee0a332e8a
commit 0670ebf8c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/vant/src/cascader/Cascader.tsx
View File

@ -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<CascaderTab[]>([]);
const activeTab = ref(0);
const [selectedElementRefs, setSelectedElementRefs] =
useRefs<HTMLElement>();
const {
text: textKey,
@ -222,6 +227,7 @@ export default defineComponent({
return (
<li
ref={selected ? setSelectedElementRefs(tabIndex) : undefined}
role="menuitemradio"
class={[bem('option', { selected, disabled }), option.className]}
style={{ color }}
@ -283,7 +289,20 @@ export default defineComponent({
</Tabs>
);
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,