vue-svga
這是基于svga.lite封裝的一個Vue組件
支持其所有配置塘砸，且默認(rèn)值也保持一致
組件接受參數(shù)
| 屬性名 | 說明 | 類型 | 默認(rèn)值 | 必須 |
|---|---|---|---|---|
| src | 資源鏈接(需使用require包裹鏈接) |
string |
undefined | 是 |
| options | 包括官網(wǎng)的所有配置皮仁，詳情見這里 | 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參數(shù)
<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文件解析完畢后會立刻觸發(fā)
示例
<svga :src="require('test.svga')" @start="start">
替換元素&動態(tài)元素
你可以像官方文檔一樣使用替換元素&動態(tài)元素，不過需要注意的是你需要在parsed事件觸發(fā)后才能操作svgaData，同時autoPlay和autoMount屬性都要設(shè)置為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()
}
}
}
