import type {App, Directive, DirectiveBinding} from "vue";

type bindingType =
    "fade-up"
  | "fade-down"
  | "fade-left"
  | "fade-right"
  | "fade-up-right"
  | "fade-up-left"
  | "fade-down-right"
  | "fade-down-left"
  | "flip-up"
  | "flip-down"
  | "flip-left"
  | "flip-right"
  | "slide-up"
  | "slide-down"
  | "slide-left"
  | "slide-right"
  | "zoom-in"
  | "zoom-in-up"
  | "zoom-in-down"
  | "zoom-in-left"
  | "zoom-in-right"
  | "zoom-out"
  | "zoom-out-up"
  | "zoom-out-down"
  | "zoom-out-left"
  | "zoom-out-right"

const config = {
  duration : 1000, // 持续时间 ms
  offset : 120, // 偏移距离 px
  easing : "ease", // 运动曲线 可选值 linear | ease | ease-in | ease-out | ease-in-out | ease-in-back | ease-out-back | ease-in-out-back | ease-in-sine | ease-out-sine | ease-in-out-sine | ease-in-quad | ease-out-quad | ease-in-out-quad | ease-in-cubic | ease-out-cubic | ease-in-out-cubic | ease-in-quart | ease-out-quart | ease-in-out-quart
  delay : 500, // 延时
  defaultAnimate: "fade-up" as bindingType // 默认动画
}

const aos: Directive<any, any> = {
  mounted: (el, binding: DirectiveBinding<bindingType>) => {
    el.setAttribute("data-aos", binding.value || config.defaultAnimate)
    el.setAttribute("data-aos-duration",config.duration.toString())
    el.setAttribute("data-aos-offset",config.offset.toString())
    el.setAttribute("data-aos-easing",config.easing.toString())
    el.setAttribute("data-aos-delay",config.delay.toString())
  }
}
export default {
  install(app: App<Element>, {
    duration = 400, // 持续时间 ms
    offset = 120, // 偏移距离 px
    easing = "ease", // 运动曲线 可选值 linear | ease | ease-in | ease-out | ease-in-out | ease-in-back | ease-out-back | ease-in-out-back | ease-in-sine | ease-out-sine | ease-in-out-sine | ease-in-quad | ease-out-quad | ease-in-out-quad | ease-in-cubic | ease-out-cubic | ease-in-out-cubic | ease-in-quart | ease-out-quart | ease-in-out-quart
    delay = 0, // 延时
    defaultAnimate = "fade-up" as bindingType // 默认动画
  }) {
    config.duration = duration
    config.offset = offset
    config.easing = easing
    config.delay = delay
    config.defaultAnimate = defaultAnimate
    app.directive("aos", aos)
  }
}

import { createApp } from 'vue'
import App from './App.vue'
...
import AOS from "aos"
import 'aos/dist/aos.css';
import aosAnimate from "@/directives/aos-animate"

const app = createApp(App)
...
app.use(aosAnimate,{})

app.mount('#app')

AOS.init()

<template>
  <div class=" mb55px" v-aos="'zoom-in'">
	hello world
  </div>
</template>