美文网首页
vue web 播放svga文件

vue web 播放svga文件

作者: 记录学习生活 | 来源:发表于2021-12-15 18:41 被阅读0次

    安装svgaplayerweb

    yarn add svgaplayerweb
    

    组件中引入

    import SVGA from "svgaplayerweb"
    

    创建方法

    playSvg(){
                    //一定要使用$nextTick,等到页面加载完成再处理数据,否则会找不到页面元素,报Undefind的错误
                    const that = this
                    this.$nextTick(()=>{
                        // const player = new SVGA.Player('#svga')
                        // const parser = new SVGA.Parser('#svga')
                        //这里使用动态加载的方式,加载tableData返回的svga源(例如:http://a.svga)
                        that.parser.load(this.svgaInfo, function(videoItem) {
                            that.player.setVideoItem(videoItem)
                            that.player.startAnimation()
                            that.player.clearsAfterStop = true //player有很多属性,根据需要设置
                        })
                    })
                },
    

    在需要的地方调用playSvg()方法即可

    相关文章

      网友评论

          本文标题:vue web 播放svga文件

          本文链接:https://www.haomeiwen.com/subject/mmppfrtx.html