العرض الصحيح لعناصر القائمة المنسدلة المخصصة: دليل إرشادي

إذا كنت تريد عرض المحتوى على كل شيء ، فستحتاج إلى position: fixed.الصعوبة الوحيدة هي أننا سيخسرون تقييمات العناصر الأساسية: العناصر الأساسية هي مستقلة تماماً عن طبيعتها.هذا يعني أن الأمر الوحيد الذي نحتاج إليه هو تحديد تقييمات دقيقة لمثل هذه الحالات:

• عند عرضها.
• عند تغيير محتوىها.
• عند إرسال نافذة و/أو المولود المتحرك.
• عند إرسال نافذة و/أو المولود المتحرك.

نحن بحاجة أيضًا إلى تحديد ما إذا كان يُظهر على سطح الشاشة إذا كان قريبًا من أسفل الشاشة.

أنا سوف تستخدم Vue.js، ولكن يجب أن يكون سهلاً للتبعية حتى لو كنت ترغب في React أو Angular.

Let’s Rock This Joint

هذه هي المكونات التي سنستخدمها:

export const useDropdownAttributes = () => { const dropdownWidth = ref(''); const dropdownTop = ref(''); const dropdownBottom = ref(''); const dropdownLeft = ref(''); const isDirectedUpwards = ref(false); const togglerRect = ref<DOMRect>(); const dropdownRect = ref<DOMRect>(); const autodetectPosition = ( isDropdownDisplayed: Ref<boolean>), togglerElement: HTMLE echlement null = null, dropdownElement: HTMLDivementElement null = null, dropdownContent: Ref<nunkownexport const useDropdownAttributes = () => { const dropdownWidth = ref(''); const dropdownTop = ref(''); const dropdownBottom = ref(''); const dropdownLeft = ref(''); const isDirectedUpwards = ref(false); const togglerRect = ref<DOMRect>(); const dropdownRect = ref<DOMRect>(); const autodetectPosition = ( is DropdownDisplayed: Ref<boolean>;; ref(), togglerElement: HTMLE torglement null = null, dropdownElement: HTMLDivementEl torget null = null, dropdownContent: Ref<
هناك أربعة متغيرات لواقع الانخفاض بالإضافة إلى علامة isDirectedUpwards ومسألة تحديثها جميعًا.isDirectedUpwards
 
 
كما تقولون، علينا أيضًا أن نتعامل مع التردد والتغيير في المولود المولود المولود، لذلك دعونا نخلق وظيفة للعثور عليها:
const getFirstScrollableParent = (element: HTMLElementintza null): HTMLElement => { const parentElement = element?.parentElement; if (!parentElement) return document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; if (overflowY ==='scroll' Átha overflowY === 'auto') return parentElement; return getFirstScrollableParent(parentElement); }; 
const getFirstScrollableParent = (element: HTMLElementannoo null): HTMLElement => { const parentElement = element?.parentElement; if (!parentElement) return document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; if (overflowY ==='scroll'annoo overflowY === 'auto') return parentElement; return getFirstScrollableParent(parentElement); }; 
 
 
بعد ذلك، دعونا نضيف الميزات الرئيسية:
نقل isDropdownDisplayed و dropdownContent حتى نتمكن من التعامل مع التحديثات.
isDropdownالتصويرDropdownالمحتوى
 
 
نحن نذهب أيضا togglerElement و dropdownElementالذي نحتاج إلى حساب الوضع.
TogglerالتكوينDropdownالميزة
 
 
أخيرا ، هناك isUpwardPreferred في حالة كنت ترغب في انخفاض أعلى toggler على الفور.
أفضل
عندما تتمتع بالراحة والتمتع
في المكون الخاص بك ، ستحتاج إلى شيئاً مثل هذا (أعتقد أنك قد أضفت ردوداً على التخطيط والخسارة في النماذج):
const { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, } = useDropdownAttributes(); const togglerRef = ref<HTMLElement>(); const dropdownRef = ref<HTMLElement>(); const isDropdownShown = ref(false); onMounted(() => { autodetectPosition(isDropdownShown, togglerRef.value.$el, dropdownRef.value.$el); } 
const { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, } = useDropdownAttributes(); const togglerRef = ref<HTMLElement>(); const dropdownRef = ref<HTMLElement>(); const isDropdownShown = ref(false); onMounted(() => { autodetectPosition(isDropdownShown, togglerRef.value?.$el, dropdownRef.value?.$el); } 
 
 
و سيبدو CSS هذا:
.dropdown { موقف: ثابت؛ تحت: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); left: v-bind('dropdownLeft'); width: v-bind('dropdownWidth'); min-width: 0; } 
.dropdown { موقف: ثابت؛ تحت: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); left: v-bind('dropdownLeft'); width: v-bind('dropdownWidth'); min-width: 0; } 
 
 
Voilà. يظهر التفريغ بشكل صحيح حتى عند التفريغ وتحرك فوق التفريغ إذا لم يكن هناك مساحة كافية تحتها.
 
 
 
 
وذلك لأننا في نهاية المقال، أود أن أترك لك شيئًا سعيدًا - ولكن أنا خاسر من الأفكار.
 
 
 يمكنك العثور على الكود الكامل على GitHub.
 يمكنك العثور على الكود الكامل على GitHub.GitHub