https://github.com/jayzangwill/vue-svga

🏆 Svga component for @vuejs
https://github.com/jayzangwill/vue-svga

svg svga svga-library svgaplayer vue vue-component vue-components vue-plugin vue2 vuejs vuejs2

Last synced: about 1 month ago
JSON representation

🏆 Svga component for @vuejs

• Host: GitHub
• URL: https://github.com/jayzangwill/vue-svga
• Owner: JayZangwill
• License: mit
• Created: 2020-03-04T07:39:30.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-11-08T05:11:41.000Z (about 2 years ago)
• Last Synced: 2024-10-14T01:36:26.250Z (2 months ago)
• Topics: svg, svga, svga-library, svgaplayer, vue, vue-component, vue-components, vue-plugin, vue2, vuejs, vuejs2
• Language: Vue
• Size: 575 KB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-svga

这是基于[svga.lite](https://github.com/svga/SVGAPlayer-Web-Lite)封装的一个Vue组件

支持其所有[配置](https://github.com/svga/SVGAPlayer-Web-Lite/blob/master/README.zh-CN.md#playerset-%E5%8F%82%E6%95%B0-)，且默认值也保持一致

## 组件接受参数

属性名 |  说明 | 类型 | 默认值 | 必须

-|-|-|-|-

src | 资源链接(需使用`require`包裹链接) | `string` | undefined | 是

options | 包括官网的所有配置，详情见[这里](https://github.com/svga/SVGAPlayer-Web-Lite/blob/master/README.zh-CN.md#playerset-%E5%8F%82%E6%95%B0-) | `object` | {} | 否

options.autoPlay | 加载完毕后是否自动播放 | `boolean` | true | 否

## 安装

```sh

yarn add vue-svga

# 或者

npm i vue-svga

```

## 使用

```javascript

import { svga } from 'vue-svga'

export default {

  components: {

    svga,

  }

}

// 或

import Vue from 'vue'

import svga from 'vue-svga'

Vue.use(svga)

```

```html

```

### 使用options参数

```html

```

```javascript

export default {

  data() {

    return {

      options: {

        loop = 0,

        fillMode = 'forwards',

        playMode = 'forwards',

        startFrame = 0,

        endFrame = 0,

        autoPlay = true

      }

    }

  }

}

```

## 提供的方法

属性名 |  说明

-|-|-

start | 播放svga

pause | 暂停svga

stop | 停止svga

clear | 清空画布

### 使用示例

```html

```

```javascript

this.$refs.svga.start() // 开始播放

this.$refs.svga.pause() // 暂停播放

this.$refs.svga.stop() // 停止播放

this.$refs.svga.clear() // 清空画布

```

## 事件

与[文档](https://github.com/svga/SVGAPlayer-Web-Lite/blob/master/README.zh-CN.md#%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8)保持一致

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

### 示例

```html

```

## 替换元素&动态元素

你可以像[官方文档](https://github.com/svga/SVGAPlayer-Web-Lite/blob/master/README.zh-CN.md#%E6%9B%BF%E6%8D%A2%E5%85%83%E7%B4%A0)一样使用替换元素&动态元素，**不过需要注意的是你需要在`parsed`事件触发后才能操作`svgaData`，同时autoPlay和autoMount属性都要设置为false：**

```html

```

```javascript

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()

    }

  }

}

```