Vue 3 - Svgator 플레이어는 항상 정의되지 않습니다.
<p>현재 저는 SVGator를 사용하여 SVG 애니메이션을 만들었습니다. <br />내 애플리케이션에 리소스로 가져와서 실행해 보았습니다. </p><p>이 문서의 지침에 따라 성공적으로 구현했습니다. </p><p>하지만 애니메이션을 많이 만들어야 할 수도 있기 때문에 좀 더 일반화하려고 노력했습니다.
<pre class="brush:js;toolbar:false;"><스크립트 설정 lang="ts">
'vue'에서 { ref, 정의 구성 요소, h, 구성 요소, 시계 } 가져오기;
'@assets/example.svg?raw'에서 exampleSvg를 가져옵니다.
인터페이스 IComponentProperties {
svg: 문자열;
}
const componentProperties = withDefaults(defineProps<IComponentProperties>(), {
svg: () =>
});
const 요소 = ref<HTMLElement>();
const animationSvg = 정의구성요소({
렌더링() {
return h('svg', { innerHTML: componentProperties.svg, ref: 요소 });
},
});
함수 runAnimation() {
if (!element.value) 반환;
const { firstChild } = 요소.값;
const svg = firstChild;
svg?.svgatorPlayer?.play();
}
보다(
() => 요소.값,
() =>
실행애니메이션();
},
{
즉각적인: 사실,
}
);
</스크립트>
<템플릿>
<구성요소:is="animatedSvg" />
</템플릿>
</pre>
<p>이것은 동일한 코드를 포함하는 완전한 Vue 애플리케이션입니다. </p><p>svg?.svgatorPlayer는 왜 항상 null인가요?
