@fesjs/fes-design/es/timeline/icon.js

fes-design for PC

import { defineComponent, computed, createVNode } from 'vue';
import { COMPONENT_NAME, ICON_DEFAULT_COLOR } from './const';
import { isValidRenderResult, cls, isPresetIconTypes } from './utils';
import { useCustomIconRegister } from './useCustomIcons';

const iconProps = {
  index: {
    type: Number,
    required: true
  },
  icon: {
    type: [String, Function]
  },
  slotRender: {
    type: Function
  },
  data: {
    type: Array
  }
};
var icon = defineComponent({
  name: `${COMPONENT_NAME}Icon`,
  props: iconProps,
  setup: props => {
    const customIcon = computed(() => {
      let customIcon;
      // prop 的渲染函数优先级高于插槽
      if (props.slotRender) {
        customIcon = props.slotRender({
          index: props.index,
          item: props.data[props.index]
        });
      } else if (typeof props.icon === 'function') {
        customIcon = props.icon({
          index: props.index,
          item: props.data[props.index]
        });
      }

      // 自定义渲染没有内容时，fallback
      if (!isValidRenderResult(customIcon)) {
        customIcon = undefined;
      }
      return customIcon;
    });
    const isCustom = computed(() => !!customIcon.value);
    const {
      iconRef
    } = useCustomIconRegister(props.index, isCustom);
    return () => {
      var _props$icon;
      // 自定义图标
      if (isCustom.value) {
        return createVNode("div", {
          "ref": iconRef,
          "class": [cls('item-icon'), cls('item-icon-custom')]
        }, [customIcon.value]);
      }

      // 自定义颜色
      if (typeof props.icon === 'string' && !isPresetIconTypes(props.icon)) {
        return createVNode("div", {
          "ref": iconRef,
          "class": cls('item-icon'),
          "style": {
            color: props.icon,
            borderColor: props.icon
          }
        }, null);
      }

      // 预设颜色
      return createVNode("div", {
        "ref": iconRef,
        "class": [cls('item-icon'), cls(`item-icon-${(_props$icon = props.icon) !== null && _props$icon !== void 0 ? _props$icon : ICON_DEFAULT_COLOR}`)]
      }, null);
    };
  }
});

export { icon as default };