fix(Dropdown): fix dropdown item calcuation height

Tencent · Aug 16, 2024 · cc9e78f · cc9e78f
1 parent 17918f1
commit cc9e78f
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx
@@ -17,6 +17,7 @@ export default defineComponent({
     const dropdownClass = usePrefixClass('dropdown');
     const dropdownMenuClass = usePrefixClass('dropdown__menu');
     const scrollTopMap = reactive({});
+    const itemHeight = ref(null);
     const menuRef = ref<HTMLElement>();
     const isOverMaxHeight = ref(false);
     const { ChevronRightIcon } = useGlobalIcon({
@@ -39,6 +40,7 @@ export default defineComponent({
         const menuHeight = parseInt(window?.getComputedStyle(menuRef.value).height, 10);
         if (menuHeight >= props.maxHeight) isOverMaxHeight.value = true;
       }
+      itemHeight.value = document.querySelector(`.${dropdownClass.value}__item`).scrollHeight + 2;
     });
 
     const getContent = (content: string | TNode) => {
@@ -54,7 +56,7 @@ export default defineComponent({
       let renderContent;
       data.forEach?.((menu, idx) => {
         const optionItem = { ...(menu as DropdownOption) };
-        const onViewIdx = idx - Math.ceil(scrollTopMap[deep] / 30);
+        const onViewIdx = idx - Math.ceil(scrollTopMap[deep] / itemHeight.value);
         const renderIdx = onViewIdx >= 0 ? onViewIdx : idx;
 
         if (optionItem.children) {
@@ -86,7 +88,7 @@ export default defineComponent({
                   ]}
                   style={{
                     position: 'absolute',
-                    top: `${renderIdx * 30}px`,
+                    top: `${renderIdx * itemHeight.value}px`,
                   }}
                 >
                   <div