بعد قيامك بنسخ مكون من مكتبة Tailwind UI والبدء في تكييفه من Vue JS إلى Alpine JS.. قد تتساءل عما يجب فعله بشأن التحولات.

أشياء يجب أن تكون على علم بها:

• تسمي Alpine حالتي البداية والنهاية "start" و"end".
• يستدعي Vue حالتي البداية والنهاية "from" و"to"
• يحتوي Alpine "directives" ie x-transition:enter="classes"
• يحتوي Vue على مكون مجمّع يطبق الفئات على الطفل
• يطبق Alpine الفئات التي تمررها لكل حالة، ="class"
• تطبق Vue الفئات الافتراضية على العنصر الفرعي، class = "enter-start"
• يحتوي مكون Vue على دعائم لتغيير الفئات الافتراضية
• ليس لدى Vue دعم أصلي للنقر بعيدًا

لذلك مع أخذ كل ذلك في الاعتبار، أعتقد أن الخطوات التالية هي الطريقة البسيطة للانتقال بسرعة من انتقالات Alpine JS إلى Vue JS.

1: قم بتغيير بناء الجملة المضمن إلى مكدس

حدد متعددًا في IDE الخاص بك ثم ضع كل انتقال x على سطر جديد

<div
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="transform opacity-0 scale-95">

2: قم بتغيير "-start" إلى "-from" و"-end" إلى "-to"

كما ذكرنا سابقًا، يستخدم Vue "from" و"to" وليس "start" و"from"

3: إزالة x-transition: from من كل سطر

نقوم بتحويل هذه التوجيهات من توجيهات Alpine إلى خصائص Vue الثابتة

<div
    v-show="open"
    enter="transition ease-out duration-200"
    enter-from="transform opacity-0 scale-95">

4: انقل props إلى مكون الغلاف <transition>

<transition
    enter="transition ease-out duration-200"
    enter-from="transform opacity-0 scale-95">
        <div v-show="open">...</div>
</transition>

5: أضف "-class" إلى نهاية كل prop

يسمح لك مكون <transition> الخاص بـ Vue بإضافة فئات لتطبيقها على المكون الفرعي في كل نقطة في دورة حياة الانتقال. تتوافق أسماء الخصائص بشكل مثالي وتتطلب منا فقط إضافة "-class" إلى نهاية كل منها.

<transition
    enter-active-class="transition ease-out duration-200"
    enter-from-class="transform opacity-0 scale-95">
        <div v-show="open">...</div>
</transition>

6: نقل التحويل إلى العنصر الفرعي

يجب إضافة التحويل إلى العنصر الفرعي ويمكن إزالته من خصائص النقل

<transition
    enter-active-class="ease-out duration-200"
    enter-from-class="opacity-0 scale-95">
        <div v-show="open" class="transform">...</div>
</transition>

التعامل Click.away

Alpine تأتي مع سهولة التعامل مع Click.away.لاكن الفيو لا.

يمكنك تسجيل مستمع الحدث في Mounted للتعامل مع هذا السلوك كما يلي:

1: أضف ref = "component_name" إلى العنصر الأصلي داخل المكون

أخبر المكون الخاص بك بعنصر html الذي يجب أن يشاهد النقرات خارجه

2: استمع للنقرات وتحقق مما إذا كان العنصر خارج عنصر المرجع.

mounted() {
    document.addEventListener('click', event => {    
        event.stopPropagation();
        if(!this.$refs.component_name.contains(event.target)) {
            this.open = false;
        }
    });
}