various-ui/es/components/carousel/multiple-view/src/composable.mjs

This is a test version of the Vue 3 component library

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

const useComposable = (define, emits) => {
  const variable = {
    delay: define.delay / 1e3,
    //* 轮播图切换过渡的间隔（秒）
    width: 0,
    offset: 0,
    delayUp: define.delay * 1.1,
    //* 轮播图切换间隔（毫秒）
    observer: void 0
  };
  const refs = {
    main: ref(),
    //* 轮播图组件的主体
    controls: ref(false),
    //* 轮播图组件控制器显示状态
    boundary: ref("first"),
    //* 轮播图组件的边界状态  first | middle | last
    autoTimer: ref(),
    //* 轮播图组件自动播放定时器
    container: ref()
    //* 轮播图组件列表的容器
  };
  const methods = {
    //* 初始化函数
    init: () => {
      if (!refs.main.value || !refs.container.value) return;
      if (refs.main.value.clientWidth < refs.container.value.clientWidth) {
        refs.controls.value = true;
        if (variable.offset > 0) {
          variable.offset = refs.container.value.clientWidth * variable.offset / variable.width;
          variable.width = refs.container.value.clientWidth;
          gsap.set(refs.container.value, { transform: `translate3d(${-1 * variable.offset}, 0, 0)` });
        } else {
          variable.width = refs.container.value.clientWidth;
          gsap.set(refs.container.value, { transform: "translate3d(0, 0, 0)" });
        }
      } else {
        refs.controls.value = false;
        variable.offset = 0;
        variable.width = refs.container.value.clientWidth;
        gsap.set(refs.container.value, { transform: "translate3d(0, 0, 0)" });
      }
    },
    //* 切换函数
    switchCarousel: (number, _data) => {
      if (!refs.main.value || !refs.container.value || refs.autoTimer.value) return;
      let offset = variable.offset + number * refs.main.value.clientWidth;
      if (number == 1) {
        for (let i = 1; i < refs.container.value.children.length - 1; i++) {
          const currentNode = refs.container.value.children[i];
          const backNode = refs.container.value.children[i - 1];
          const backNodeRight = backNode ? backNode.offsetLeft + backNode.offsetWidth : 0;
          if (currentNode.offsetLeft < offset && currentNode.offsetLeft + currentNode.offsetWidth > offset) {
            if (currentNode.offsetLeft <= variable.offset && currentNode.offsetLeft + currentNode.offsetWidth >= variable.offset) {
              break;
            } else {
              offset = currentNode.offsetLeft;
              break;
            }
          }
          if (backNodeRight <= offset && currentNode.offsetLeft >= offset) {
            offset = currentNode.offsetLeft;
            break;
          }
        }
      } else {
        for (let i = 0; i < refs.container.value.children.length; i++) {
          const currentNode = refs.container.value.children[i];
          const nextNode = refs.container.value.children[i + 1];
          const nextNodeLeft = nextNode.offsetLeft || refs.container.value.clientWidth;
          const offsetRight = offset + refs.main.value.clientWidth;
          if (currentNode.offsetLeft < offsetRight && currentNode.offsetLeft + currentNode.offsetWidth > offsetRight) {
            const offsetNextRight = variable.offset + refs.main.value.clientWidth;
            if (currentNode.offsetLeft <= offsetNextRight && currentNode.offsetLeft + currentNode.offsetWidth >= offsetNextRight) {
              break;
            } else {
              offset = currentNode.offsetLeft + currentNode.offsetWidth - refs.main.value.clientWidth;
              break;
            }
          }
          if (currentNode.offsetLeft + currentNode.offsetWidth <= offsetRight && nextNodeLeft >= offsetRight) {
            offset = currentNode.offsetLeft + currentNode.offsetWidth - refs.main.value.clientWidth;
            break;
          }
        }
      }
      if (offset <= 0) {
        offset = 0;
        refs.boundary.value = "first";
      } else if (offset + refs.main.value.clientWidth >= refs.container.value.clientWidth) {
        offset = (refs.container.value.clientWidth / refs.main.value.clientWidth - 1) * refs.main.value.clientWidth;
        refs.boundary.value = "last";
      } else {
        refs.boundary.value = "middle";
      }
      variable.offset = offset;
      gsap.to(refs.container.value, {
        duration: variable.delay,
        transform: `translate3d(${variable.offset * -1}px, 0, 0)`
      });
      refs.autoTimer.value = setTimeout(() => {
        refs.autoTimer.value = void 0;
      }, variable.delayUp);
    },
    //* 切换函数（上）
    switchBack: () => methods.switchCarousel(-1),
    //* 切换函数（下）
    switchNext: () => methods.switchCarousel(1)
  };
  const computeds = {
    //* 主体类名
    className: computed(() => `ui-mv-carousel-${define.arrow}`),
    style: computed(() => {
      const result = {};
      if (define.width) {
        if (isNumber(define.width)) result.width = define.width + "px";
        else result.width = define.width;
      }
      if (define.height) {
        if (isNumber(define.height)) result.height = define.height + "px";
        else result.height = define.height;
      }
      return result;
    }),
    //* 是否显示左侧控制按钮
    isFirstControl: computed(() => {
      return define.arrow != "never" && refs.controls.value && refs.boundary.value != "first";
    }),
    //* 是否显示右侧控制按钮
    isLastControl: computed(() => {
      return define.arrow != "never" && refs.controls.value && refs.boundary.value != "last";
    })
  };
  return { refs, methods, computeds, variable };
};

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