cari

Rumah  >  Soal Jawab  >  teks badan

Vue 3 - Pemain Svgator sentiasa tidak ditentukan.

<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>
P粉478835592P粉478835592526 hari yang lalu558

membalas semua(1)saya akan balas

  • P粉455093123

    P粉4550931232023-07-29 00:05:50

    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>

    balas
    0
  • Batalbalas