Vue 动态组件触发动画 调用组件midleware组件midleware我想要什么我现在拥有的我目前拥有的 - keep-live

问题描述

描述

在我插入的项目中，大部分操作都是通过图标执行的。因此，我创建了一个组件，其中包含按钮的基本组件，并在通过 props 传递图标时动态导入图标。

我面临的问题是为图标设置动画。

我有一个图标，其中的目标是在播放/暂停之间进行切换，预期结果如下（不介意条的位置，我仍在处理动画）>

但是，通过这个middleware组件调用图标时，并没有执行动画，因为在切换 isPaused prop时组件总是在渲染。

我已经尝试过使用 keep-live，虽然它不渲染，但动画不运行。

我可能做错了什么或者有更好的选择吗？

代码

调用组件midleware

<button-with-icon
    :icon="{
        component: () => import( /* webpackChunkName: 'IconPlayBig' */ '@/components/bundles/layout/images/icons/IconPlayBig' ),props: { isPause }
    }"
    class="panel__header__close position--absolute"
    :action="{
        execute: true,function: () => { isPause = !isPause; }
    }"
/>

组件midleware

<template>
    <base-button
        type="button"
        class="background--transparent accessibility--button accessibility--active"
        :hasHover="hasHover"
        :customClass="true"
        v-on="{
            ...( action.execute && {
                click: click
            })
        }"
    >
        <template #button__icon>
             <component
                :is="icon.component"
                :class="icon.class"
                v-bind="{ ...icon.props }"
                tabindex="-1"
              />
        </template>
    </base-button>
</template>

<script>
export default {
    components: {
        Test: () => import( /* webpackChunkName: 'IconPlayBig' */ '@/components/bundles/layout/images/icons/IconPlayBig' ),BaseButton: () => import( /* webpackChunkName: 'BaseButton' */ '@/components/bundles/buttons/BaseButton' )
    },props: {
        icon: Object,hasHover: {
            type: Boolean,default: false
        },action: {
            type: Object,default: () => ({ })
        }
    },setup ( props ) {
        const click = () => {
            props.action.function( props.action.param );
        };

        return { click };
    }
};
</script>

结果

我想要什么

我现在拥有的

我目前拥有的 - keep-live

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）