0

説明

私が挿入されたプロジェクトでは、ほとんどのアクションはアイコンを介して実行されます。そのため、ボタンの基本コンポーネントを持ち、小道具を介して渡されるアイコンを動的にインポートするコンポーネントを作成しました。

私が直面している問題は、アイコンをアニメーション化することです。

目的は再生/一時停止を切り替えることであり、期待される結果は次のとおりです(バーの配置は気にしないでください。私はまだアニメーションを扱っています)

ただし、このコンポーネントを介してアイコンを呼び出すと、middlewareプロパティの切り替え時にコンポーネントが常にレンダリングされるため、アニメーションは実行されません isPaused。

を使用してみ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

ここに画像の説明を入力

4

0 に答える 0