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

fes-design for PC

import { defineComponent, inject, computed, createVNode, Fragment, Transition, withDirectives, vShow } from 'vue';
import { throttle } from 'lodash-es';
import { LeftOutlined, RightOutlined } from '../icon';
import { provideKey } from './const';

var arrow = defineComponent({
  name: 'FCarouselArrow',
  components: {
    LeftOutlined,
    RightOutlined
  },
  props: {
    hover: {
      type: Boolean,
      required: true
    },
    showArrow: {
      type: String,
      default: 'hover'
    },
    activeIndex: Number
  },
  setup(props) {
    const {
      prefixCls,
      direction,
      rootProps,
      slideChildren,
      setActiveItem
    } = inject(provideKey);
    const arrowVisible = computed(() => props.showArrow !== 'never' && direction.value === 'horizontal');
    const arrowLeftShow = computed(() => (props.showArrow === 'always' || props.hover) && (rootProps.loop || props.activeIndex > 0));
    const arrowRightShow = computed(() => (props.showArrow === 'always' || props.hover) && (rootProps.loop || props.activeIndex < slideChildren.value.length - 1));
    const slideItemInStage = (slideItem, index) => {
      const length = slideChildren.value.length;
      if (index === length - 1 && slideItem.states.inStage && slideChildren.value[0].states.active || slideItem.states.inStage && slideChildren.value[index + 1] && slideChildren.value[index + 1].states.active) {
        return 'left';
      }
      if (index === 0 && slideItem.states.inStage && slideChildren.value[length - 1].states.active || slideItem.states.inStage && slideChildren.value[index - 1] && slideChildren.value[index - 1].states.active) {
        return 'right';
      }
      return false;
    };

    // 当鼠标进入箭头按钮
    const onEnterArrowButton = arrow => {
      if (direction.value === 'vertical') {
        return;
      }
      slideChildren.value.forEach((item, index) => {
        if (arrow === slideItemInStage(item, index)) {
          item.states.hover = true;
        }
      });
    };

    // 当鼠标离开箭头按钮
    const onLeaveArrowButton = () => {
      if (direction.value === 'vertical') {
        return;
      }
      slideChildren.value.forEach(item => {
        item.states.hover = false;
      });
    };

    // 处理点击箭头按钮
    const handleArrowClick = throttle((event, index) => {
      event.stopPropagation();
      setActiveItem(index);
    }, 300, {
      trailing: true
    });
    return () => {
      if (arrowVisible.value) {
        return createVNode(Fragment, null, [createVNode(Transition, {
          "name": "carousel-arrow-left"
        }, {
          default: () => [withDirectives(createVNode("button", {
            "type": "button",
            "class": `${prefixCls}-arrow ${prefixCls}-arrow-left`,
            "onMouseenter": () => onEnterArrowButton('left'),
            "onMouseleave": onLeaveArrowButton,
            "onClick": e => handleArrowClick(e, props.activeIndex - 1)
          }, [createVNode(LeftOutlined, null, null)]), [[vShow, arrowLeftShow.value]])]
        }), createVNode(Transition, {
          "name": "carousel-arrow-right"
        }, {
          default: () => [withDirectives(createVNode("button", {
            "type": "button",
            "class": `${prefixCls}-arrow ${prefixCls}-arrow-right`,
            "onMouseenter": () => onEnterArrowButton('right'),
            "onMouseleave": onLeaveArrowButton,
            "onClick": e => handleArrowClick(e, props.activeIndex + 1)
          }, [createVNode(RightOutlined, null, null)]), [[vShow, arrowRightShow.value]])]
        })]);
      }
    };
  }
});

export { arrow as default };