Question

我正在使用此组件： https://github.com/hilongjw/vue-lazyload

给出以下代码，一旦图像（imgUrl）加载后如何调用callMe函数？

<template>
   <div class="hero-unit-bg" v-lazy:background-image="imgUrl" >
  </div>
</template>

<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

export default {
  name: 'HeroUnit',
  data () {
    return {
      imgUrl: 'img/hero-unit-bg.png' // String
    }
  },
    methods: {
   callMe: function (event) {
      alert('Done Lazy Loading Img')
    },
  }
}
</script>

Answer 1

在文档中为described：

事件挂钩

vm.$Lazyload.$on(event, callback) vm.$Lazyload.$off(event, callback)  
vm.$Lazyload.$once(event, callback)

$on监听自定义事件的加载，加载，错误
$once收听自定义事件，但仅收听一次。首次触发时，监听器将被删除。
$off删除事件监听器。

vm.$Lazyload.$on

参数：
{string} 事件
{Function} 回调

示例

vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
  console.log(el, src)
})

vue-lazyload完成加载后如何调用函数？

1 个答案: