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

fes-design for PC

import { defineComponent, inject, computed, createVNode } from 'vue';
import { throttle } from 'lodash-es';
import { provideKey } from './const';

const INDICATOR_MOUSE_EVENT = 'mouseOperate'; // 与使用处 jsx 中的 camelCase 对应，不使用 kebab-case
var indicator = defineComponent({
  name: 'FCarouselIndicator',
  props: {
    trigger: {
      type: String,
      default: 'click'
    },
    activeIndex: Number,
    position: String,
    placement: String,
    indicatorType: String,
    type: String
  },
  emits: [INDICATOR_MOUSE_EVENT],
  setup(props, _ref) {
    let {
      emit
    } = _ref;
    const {
      prefixCls,
      slideChildren
    } = inject(provideKey);
    const indicatorsClass = computed(() => {
      const classes = [`${prefixCls}-indicators`, `${prefixCls}-indicators-${props.placement}`];
      if (props.position === 'outside' || props.type === 'card') {
        classes.push(`${prefixCls}-indicators-outside`);
      }
      return classes;
    });
    const onClickIndicator = (index, event) => {
      event.stopPropagation();
      emit(INDICATOR_MOUSE_EVENT, index, event);
    };
    const onHoverIndicator = (index, event) => {
      if (props.trigger === 'hover' && index !== props.activeIndex) {
        emit(INDICATOR_MOUSE_EVENT, index, event);
      }
    };
    const throttledIndicatorHover = throttle((index, event) => {
      event.stopPropagation();
      onHoverIndicator(index, event);
    }, 300);
    return () => createVNode("div", {
      "class": indicatorsClass.value
    }, [slideChildren.value.map((item, index) => createVNode("div", {
      "key": index,
      "class": [`${prefixCls}-indicator`, `${prefixCls}-indicator-${props.indicatorType}`, props.activeIndex === index ? 'is-active' : ''],
      "onMouseenter": e => throttledIndicatorHover(index, e),
      "onClick": e => onClickIndicator(index, e)
    }, [createVNode("button", {
      "type": "button",
      "class": `${prefixCls}-indicator-btn`
    }, null)]))]);
  }
});

export { indicator as default };