javascript - 将 AOS 库与 Vue 结合使用

Question

我将 AOS(滚动动画)库与 vue 一起使用。 AOS提供自定义JS事件:document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});

我想在该事件发生时触发一个函数。如何将其应用到我的 vue 组件中？它看起来像:v-on-aos:in使用v-on / @ ，但它不起作用。

这是我尝试过的: <div v-on:aos:in="myFunction" />

Answer 1

在创建的方法上添加文档事件监听器，然后传递您的 vue 组件方法。

  created() {
    document.addEventListener('aos:in', this.aosEvent)
  },
   methods: {
    aosEvent(d){
      // event data
      console.log(d);
    }
  }