vue-svga's Introduction

vue-svga

这是基于svga.lite封装的一个Vue组件

支持其所有配置，且默认值也保持一致

组件接受参数

属性名	说明	类型	默认值	必须
src	资源链接(需使用`require`包裹链接)	`string`	undefined	是
options	包括官网的所有配置，详情见这里	`object`	{}	否
options.autoPlay	加载完毕后是否自动播放	`boolean`	true	否

安装

yarn add vue-svga

# 或者

npm i vue-svga

使用

import { svga } from 'vue-svga'

export default {
  components: {
    svga,
  }
}

// 或
import Vue from 'vue'
import svga from 'vue-svga'

Vue.use(svga)

<svga :src="require('test.svga')" />

使用options参数

<svga :src="require('test.svga')" :options="options">

export default {
  data() {
    return {
      options: {
        loop = 0,
        fillMode = 'forwards',
        playMode = 'forwards',
        startFrame = 0,
        endFrame = 0,
        autoPlay = true
      }
    }
  }
}

提供的方法

使用示例

<svga :src="require('test.svga')" ref="svga">

this.$refs.svga.start() // 开始播放
this.$refs.svga.pause() // 暂停播放
this.$refs.svga.stop() // 停止播放
this.$refs.svga.clear() // 清空画布

事件

与文档保持一致

除此之外还提供了parsed事件，svga文件解析完毕后会立刻触发

示例

<svga :src="require('test.svga')" @start="start">

替换元素&动态元素

你可以像官方文档一样使用替换元素&动态元素，不过需要注意的是你需要在parsed事件触发后才能操作svgaData，同时autoPlay和autoMount属性都要设置为false：

<svga :src="require('test.svga')" @parsed="parsed" ref="svga" />

export default {
  data() {
    return {
      options: {
        autoMount: false,
        autoPlay: false
      }
    }
  },
  methods: {
    async parsed() {
      const svga = this.$refs.svga

      const image = new Image()
      image.src = 'https://xxx.com/xxx.png'

      svga.svgaData.images['key'] = image

      await svga.mount()

      svga.start()
    }
  }
}

Recommend Projects