various-ui/es/components/carousel/seamless/src/composable.mjs

This is a test version of the Vue 3 component library

import { ref, computed } from 'vue';
import '../../../../utils/index.mjs';
import { isNumber } from 'lodash-es';

const useComposable = (define) => {
  const refs = {
    offset: ref(0),
    frame: ref(),
    main: ref(),
    content: ref(),
    container: ref()
  };
  const methods = {
    //* 绘制动画
    animation: () => {
      if (!refs.container.value || !refs.content.value || !refs.main.value) return;
      if (refs.offset.value >= refs.content.value.offsetWidth) {
        refs.offset.value = 0;
      } else {
        refs.offset.value += define.delay;
      }
      refs.container.value.style.transform = `translateX(-${refs.offset.value}px)`;
      refs.frame.value = window.requestAnimationFrame(methods.animation);
    },
    //* 鼠标移入事件
    mouseenter: () => {
      refs.frame.value && window.cancelAnimationFrame(refs.frame.value);
    },
    //* 鼠标移出事件
    mouseleave: () => {
      if (!refs.container.value || !refs.content.value || !refs.main.value) return;
      else {
        refs.frame.value = window.requestAnimationFrame(methods.animation);
      }
    }
  };
  const computeds = {
    //* 标签样式
    style: computed(() => {
      if (isNumber(define.height)) return { height: define.height + "px" };
      else {
        return { height: define.height };
      }
    })
  };
  return { refs, methods, computeds };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map