@fesjs/fes-design/es/carousel/carousel.js

fes-design for PC

import { defineComponent, ref, watch, createVNode } from 'vue';
import { useTheme } from '../_theme/useTheme';
import useResize from '../_util/use/useResize';
import { CHANGE_EVENT } from '../_util/constants';
import { CAROUSEL_NAME } from './const';
import Arrow from './arrow';
import Indicator from './indicator';
import useCarousel from './useCarousel';
import useCarouselStyle from './useCarouselStyle';
import useCarouselPlay from './useCarouselPlay';

const carouselProps = {
  height: {
    type: String,
    default: ''
  },
  initialIndex: {
    type: Number,
    default: 0
  },
  trigger: {
    type: String,
    default: 'click'
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  indicatorType: {
    type: String,
    default: 'linear'
  },
  indicatorPlacement: {
    type: String,
    default: 'bottom'
  },
  indicatorPosition: {
    type: String,
    default: ''
  },
  showArrow: {
    type: String,
    default: 'hover'
  },
  type: {
    type: String,
    default: ''
  },
  loop: {
    type: Boolean,
    default: true
  },
  pauseOnHover: {
    type: Boolean,
    default: true
  }
};
var carousel = defineComponent({
  name: CAROUSEL_NAME,
  components: {
    Arrow
  },
  props: carouselProps,
  emits: [CHANGE_EVENT],
  setup(props, _ref) {
    let {
      slots,
      emit,
      expose
    } = _ref;
    useTheme();
    const {
      prefixCls,
      wrapperRef,
      direction,
      slideChildren,
      activeIndex,
      prev,
      next,
      setActiveItem,
      resetItemPosition
    } = useCarousel(props);
    const {
      wrapperClass,
      carouselStyle
    } = useCarouselStyle({
      props,
      prefixCls,
      direction
    });
    const {
      startTimer,
      pauseTimer
    } = useCarouselPlay({
      props,
      activeIndex,
      slideChildren
    });

    // mouse event
    const carouselHover = ref(false);
    const handleMouseEnter = event => {
      event.stopPropagation();
      carouselHover.value = true;
      if (props.pauseOnHover) {
        pauseTimer();
      }
    };
    const handleMouseLeave = event => {
      event.stopPropagation();
      carouselHover.value = false;
      startTimer();
    };

    // 操作指示器 (click / hover)
    const onOperateIndicator = index => {
      activeIndex.value = index;
    };

    // watch
    watch(() => activeIndex.value, (currValue, prevState) => {
      resetItemPosition(prevState);
      if (prevState > -1) {
        emit(CHANGE_EVENT, currValue, prevState);
      }
    });
    watch(() => props.loop, () => {
      setActiveItem(activeIndex.value);
    });
    useResize(wrapperRef, resetItemPosition);

    // expose methods
    expose({
      setActiveItem,
      prev,
      next
    });

    // render
    return () => {
      var _slots$default;
      return createVNode("div", {
        "ref": wrapperRef,
        "class": wrapperClass.value,
        "onMouseenter": handleMouseEnter,
        "onMouseleave": handleMouseLeave
      }, [createVNode("div", {
        "class": `${prefixCls}-slides`
      }, [createVNode(Arrow, {
        "hover": carouselHover.value,
        "showArrow": props.showArrow,
        "activeIndex": activeIndex.value
      }, null), createVNode("div", {
        "class": `${prefixCls}-list`,
        "style": carouselStyle.value
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)])]), createVNode(Indicator, {
        "trigger": props.trigger,
        "activeIndex": activeIndex.value,
        "position": props.indicatorPosition,
        "placement": props.indicatorPlacement,
        "indicatorType": props.indicatorType,
        "type": props.type,
        "onMouseOperate": onOperateIndicator
      }, null)]);
    };
  }
});

export { carouselProps, carousel as default };