使用Vue.js和libgif控制GIF图片播放、暂停以及导航前后帧。

libgif使用方法

预览
https://volodyan.github.io/vuelibgif_preview/#/

1.下载libgif，在项目中新建libgif.js文件

2.在组件中引入libgif.js文件，并使用

``

3.控制gif图片的组件在其他组件中使用

<template>
<div class="home">
  <gifComponents />
</div>
</template>

<script>
import gifComponents from "./gifComponents/index.vue";
export default {
name: "Home",
components: {
  gifComponents,
},
};
</script>
<style lang="scss" scoped>
.home {
display: flex;
flex-flow: row nowrap;
justify-content: center;
//align-items: center;
width: 100%;
height: 100%;
background: $exportedValue;
}
</style>

Github源码 https://github.com/volodyan/vue_libgif