svga使用
父组件
<template> <svga-canvas-talk ref="svgaCanvasWalkRef"></svga-canvas-talk> </template> <script> import SvgaCanvasTalk from '@/components/SvgaCanvasTalk.vue'
export default { components: { SvgaCanvasTalk }, } </script>
子组件
<template> <canvas id="talk-svga" class="container" ref="talkCanvas"></canvas> </template> <script> import SVGA from 'svgaplayerweb' import { Parser, Player } from 'svga' export default { props: { svgaUrl: { default: 'img/talk.svga', type: String, }, }, data() { return { player: undefined, parser: undefined, } }, created() {}, mounted() { // this.playRibbonSvga() this.init(this.svgaUrl) }, methods: { async init(url) { this.parser = new Parser() const svga = await this.parser.load(url) this.player = new Player(document.getElementById('talk-svga')) await this.player.mount(svga) this.startAnimation() this.player.onStart = () => console.log('onStart') this.player.onResume = () => console.log('onResume') this.player.onPause = () => console.log('onPause') this.player.onStop = () => console.log('onStop') this.player.onEnd = () => console.log('onEnd') }, //开始播放 startAnimation() { if (!this.player) return this.player.start() }, }, } </script> <style lang="less" scoped> .container { text-align: left; display: block; box-sizing: border-box; justify-content: center; align-items: center; margin: auto; height: 100%; overflow: hidden; } </style>
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 对象命名为何需要避免'-er'和'-or'后缀
· JDK 24 发布,新特性解读!
· C# 中比较实用的关键字,基础高频面试题!
· .NET 10 Preview 2 增强了 Blazor 和.NET MAUI
· SQL Server如何跟踪自动统计信息更新?
2021-03-15 vue监听$route