vue引入svga

最新推荐文章于 2024-03-12 17:07:42 发布

m0_61096502

最新推荐文章于 2024-03-12 17:07:42 发布

阅读量984

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61096502/article/details/128011561

版权

安装依赖

// 安装 => svgaplayerweb
npm install svgaplayerweb --save

引入svga的页面

<template>
    <div>
        <div id="demoCanvas" ref="demoCanvas"></div>
    </div>
</template>

export default {
    methods: {
        initMachineSVGA() {
          this.player = new SVGA.Player('#spraying');
          let parser = new SVGA.Parser('#spraying');
          let _that = this;
          parser.load('./electric.svga', function (videoItem) {
            _that.player.setVideoItem(videoItem);
            _that.player.startAnimation(); // 开始动画
            // _that.player.pauseAnimation(); // 结束动画
          });
        },
    },
    mounted() {
        // 调用方法
        this.initMachineSVGA()
    }
}

注: svga必须得放在vue文件中的public文件夹下