Vue 3 - Pemain Svgator sentiasa tidak ditentukan.
P粉478835592
2023-07-28 08:44:31
<p>Pada masa ini, saya menggunakan SVGator untuk mencipta animasi SVG. <br />Saya mengimportnya sebagai sumber ke dalam aplikasi saya dan cuba menjalankannya. </p><p>Saya mengikut arahan dalam dokumen ini dan berjaya melaksanakannya. </p><p>Walau bagaimanapun, memandangkan saya mungkin perlu mencipta sejumlah besar animasi, saya cuba menjadikannya lebih umum. </p><p><br /></p>
<pre class="brush:js;toolbar:false;"><script setup lang="ts">
import { ref, defineComponent, h, component, watch } daripada 'vue';
import exampleSvg daripada '@assets/example.svg?raw';
antara muka IComponentProperties {
svg: rentetan;
}
const componentProperties = withDefaults(defineProps<ICComponentProperties>(), {
svg: () =>
});
elemen const = ref<HTMLElement>();
const animatedSvg = defineComponent({
render() {
kembalikan h('svg', { innerHTML: componentProperties.svg, ref: element });
},
});
fungsi runAnimation() {
jika (!element.value) kembali;
const { firstChild } = element.value;
const svg = anak pertama sebagai mana-mana;
svg?.svgatorPlayer?.play();
}
menonton (
() => element.value,
() =>
runAnimation();
},
{
segera: benar,
}
);
</skrip>
<template>
<Komponen :is="animatedSvg" />
</template>
</pra>
<p>Ini adalah aplikasi Vue lengkap yang mengandungi kod yang sama. </p><p>Mengapa svg?.svgatorPlayer sentiasa batal? </p><p><strong></strong></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jadi, untuk menjawab soalan anda, nampaknya Anak pertama anda ialah HTMLElement yang mengandungi mana-mana svgatorPlayer.
Anda menggunakan ?raw untuk memproses svg sebagai rentetan.
Untuk menyelesaikan masalah ini, anda perlu mengikuti jawapan ini.
Kedua, membaca dokumentasi yang disediakan, anda tidak menggunakan JavaScript dengan svg, tetapi meletakkannya sebagai rentetan. Itulah sebabnya svgatorPlayer anda adalah sama dengan null, kerana ia tidak wujud apabila js tidak dilaksanakan. Satu penyelesaian adalah untuk melaksanakan svg dalam v-html, tetapi sedar tentang masalah suntikan XSS.
<template> <div v-html="exampleSvg"></div> <Component :is="animatedSvg" /> </template>