在Vue中使用AOS庫

Question

我在vue中使用AOS（滾動動畫）庫。 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);
    }
  }