使用动态组件为 Vue V3 创建自定义的可重用过渡组件。
vue2-transitions
npm软件包使用与下面相同的方法,并且不适用于v3,因此我决定为自己创建一个简单的方法。
<component
:is="group ? 'transition-group' : 'transition'"
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</component>
<div>
<custom-transition>
<span v-if="show">This does not work.</span>
</custom-transition>
</div>
这不起作用,我不知道为什么。 <transition>
元素的呈现方式如下。
<transition
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<span>This does not work.</span>
</transition>
当我这样重写CustomComponent.vue
时。
<transition
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</transition>
工作正常。
我添加了一个JSFiddle,以防有人想尝试一下。
答案 0 :(得分:0)
最后从vue社区找到了解决方案。 link to working jsfiddle
要使此组件正常工作:
<component
:is="group ? 'transition-group' : 'transition'"
enter-active-class="fadeInDown"
leave-active-class="fadeOutUp"
>
<slot></slot>
</component>
将Transition
和TransitionGroup
组件显式导入到组件中并注册它们。
import { Transition, TransitionGroup } from 'vue'
export default {
components: {
Transition,
TransitionGroup,
},
data() {
return { show: false };
}
}
链接到vue-next
存储库中的github issue。