我是 PHP 程序员

这件事的起因是因为一个需求，需要 监听 gif 完成然后跳转到登录页，百度了很多都没有找到类似的教程，在自己强大的搜索能力下，还是找到了，细节看下面。

github.com/buzzfeed/li…  框架地址，功能挺强大的，具体使用方法可以查看文档，因为工作原因，就不一一列出实列了，只贴实际使用的代码，如果有使用的问题的话，可以共同交流一下。

1. <template>
2. <img ref="img">
3. </template>
5. <script>
6. import '../../static/js/libgif.js'
7. import RubbableGif from '../../static/js/rubbable'
9. export default {
10. name: 'Gif',
11. props: {
12. imgUrl: String // 实列：../../static/gif/tenor.gif
13. },
14. async mounted () {
15. try {
16. // 通过异步函数，获取gif文件
17. let fetchImg = await fetch(this.imgUrl)
19. fetchImg.blob().then(blob => {
20. // 通过 FileReader 读取文件数据，获取 Base64
21. let reader = new FileReader()
22. reader.onloadend = () => {
23. this.$refs.img.src = reader.result // 输出DataURL数据
25. // 检测gif 是否完成
26. let rubbableGif = new RubbableGif({
27. gif: this.$refs.img,
28. on_end: () => {
29. // 监听gif 完成后，发送一个事件，通知父组件
30. this.