vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
39 lines (38 loc) • 1.17 kB
JavaScript
import { computed as s, ref as r, watch as h, onUnmounted as g } from "vue";
const A = (t) => {
const m = s(() => ({
height: t.height,
width: t.width,
objectFit: t.fit
})), a = r(0);
let e = null, i = 0, n = !1;
const u = (l) => {
n = !0;
const o = l || performance.now();
i || (i = o), o - i >= t.duration * 1e3 && (a.value++, a.value >= t.data.length && (a.value = 0), i = o), n && (e = requestAnimationFrame(u));
}, f = () => {
n && e && (cancelAnimationFrame(e), e = null, n = !1);
}, c = () => {
!n && t.autoplay && t.data.length > 1 && (e = requestAnimationFrame(u));
}, d = (l) => {
a.value += l, a.value >= t.data.length && (a.value = 0), a.value < 0 && (a.value = t.data.length - 1);
};
return h(
() => t.data.length,
(l) => {
l > 1 && t.autoplay ? (a.value = 0, n || (e = requestAnimationFrame(u))) : n && e && (cancelAnimationFrame(e), e = null, n = !1);
},
{ immediate: !0 }
), g(() => {
e && cancelAnimationFrame(e), e = null, n = !1;
}), {
styles: m,
index: a,
onMouseenter: f,
onMouseleave: c,
handleToggleFN: d
};
};
export {
A as useCarousel
};