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
}
}
}
}
提供的方法
属性名 | 说明
-|-|-
start | 播放svga
pause | 暂停svga
stop | 停止svga
clear | 清空画布
使用示例
<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()
}
}
}
