Vue.js 如何将VueDragable与过渡groip和标头插槽一起使用
我有transtition组制作翻转动画的工作代码Vue.js 如何将VueDragable与过渡groip和标头插槽一起使用,vue.js,sortablejs,vuedraggable,vue-transitions,Vue.js,Sortablejs,Vuedraggable,Vue Transitions,我有transtition组制作翻转动画的工作代码 <draggable v-model="items" group="backlog-posts" animation="200" handle=".post-content" draggable=".drag-item" @start="drag = true" @end="drag = false" > <transition-group typ
<draggable
v-model="items"
group="backlog-posts"
animation="200"
handle=".post-content"
draggable=".drag-item"
@start="drag = true"
@end="drag = false"
>
<transition-group
type="transition"
tag="div"
:name="!drag ? 'flip-list' : null"
>
<ArticlePost
v-for="post in items"
:key="post.id"
class="drag-item"
:post="post"
/>
</transition-group>
</draggable>
这与vuedraggable文档中的示例代码片段非常相似。
当我添加标题槽时,它停止工作
<div slot="header">Hello!</button>
你好!
如果删除过渡组并仅保留标题,它将再次工作(标题将显示,显然现在动画已存在)
如何获取标题+动画拖放?来源:
槽
限制:页眉或页脚插槽都不能与
过渡组