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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2021-03-15 vue监听$route