0
132
VistasNo puedo usar TransitionGroup en la función de procesamiento mientras construyo mi componente de pestañas personalizado
Como he escrito en el título, estoy tratando de crear mis propios componentes de pestañas. Hasta ahora es muy básico:
Tabs.vue
setup(props, { slots }) { const { activeTab } = toRefs(props); provide("activeTab", activeTab); const newSlots = slots.default().map((slot, index) => { return h(slot, { index, // for each tab to know, whether is active key: index, // for TransitionGroup }); }); return () => h( TransitionGroup, { name: "tabs-fade", }, () => newSlots ); } Tab.vue
<template> <div v-if="activeTab === index"> <slot /> </div> </template> setup() { const activeTab = inject("activeTab"); return { activeTab, }; }, Y planeé usarlo así: Testing.vue
<ul> <li @click="activeTab = 0">1</li> <li @click="activeTab = 1">2</li> <li @click="activeTab = 2">3</li> </ul> <Tabs :activeTab="activeTab"> <Tab> 1 </Tab> <Tab> 2 </Tab> <Tab> 3 </Tab> </Tabs>Sin TransitionGroup todo funciona bien, aunque cuando trato de agregarlo para una transición más fluida, aparece un error al intentar cambiar entre las pestañas:
[Vue warn]: Unhandled error during execution of render function at <TransitionGroup name="tabs-fade" > at <Tabs activeTab=1 > at <Testing> at <App> [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core at <TransitionGroup name="tabs-fade" > at <Tabs activeTab=1 > at <Testing> at <App> Uncaught (in promise) TypeError: child.el.getBoundingClientRect is not a function 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
TransitionGroup espera un número constante de niños para poder hacer la transición de un estado a otro. Actualmente, el elemento raíz de Tabs.vue se representa de forma condicional, de modo que es posible que no haya ningún elemento cuando no se cumple la condición, lo que provoca el bloqueo:
<!-- Tab.vue --> <template> <div v-if="activeTab === index"> ❌ when false, no element exists <slot/> </div> </template>Solución
Agregue un v-else en un div para asegurarse de que siempre exista un elemento en Tab.vue :
<!-- Tab.vue --> <template> <div v-if="activeTab === index"> <slot/> </div> <div v-else /> 👈 </template>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta