Vue中svga特效展示

 Vue中svga特效展示

这个url是线上地址，注意需要在vue.config.js里配置代理，不然会报跨域的错误。

附个文档链接↓

Package - svgaplayerweb

<template>
<div id="giftStyleAdd"></div>
</template>

<script>
created() {
    this.showSvg(url)
},
methods: {
//展示svga方法
    showSvg(url) {
      //一定要使用$nextTick，等到页面加载完成再处理数据
      this.$nextTick(() => {
        //这里动态给ID，列表
        this.player = new SVGA.Player("#giftStyleAdd");
        var parser = new SVGA.Parser("#giftStyleAdd");
        //这里使用动态加载的方式
        parser.load(url, (videoItem) => {
          this.widthDialog = String(videoItem.videoSize.width);
          this.player.setVideoItem(videoItem);
          this.player.startAnimation();
        });
      });
    },
}
</script>