various-ui/lib/components/carousel/seamless/src/composable.js

This is a test version of the Vue 3 component library

'use strict';

var vue = require('vue');
require('../../../../utils/index.js');
var lodashEs = require('lodash-es');

const useComposable = (define) => {
  const refs = {
    offset: vue.ref(0),
    frame: vue.ref(),
    main: vue.ref(),
    content: vue.ref(),
    container: vue.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: vue.computed(() => {
      if (lodashEs.isNumber(define.height)) return { height: define.height + "px" };
      else {
        return { height: define.height };
      }
    })
  };
  return { refs, methods, computeds };
};

exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map