@fesjs/fes-design/es/tabs/tab.js

fes-design for PC

import { defineComponent, inject, computed, onBeforeUnmount, createVNode } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import CloseCircleFilled from '../icon/CloseCircleFilled';
import { TABS_INJECTION_KEY } from './constants';
import { tabProps } from './props';

const prefixCls = getPrefixCls('tabs');
var tab = defineComponent({
  props: tabProps,
  setup(props, ctx) {
    const {
      valueRef,
      tabsLength,
      closableRef,
      isCard,
      handleTabClick,
      handleClose,
      closeModeRef,
      setDefaultValue
    } = inject(TABS_INJECTION_KEY);
    const mergeClosable = computed(() => {
      if (!isCard.value) {
        return;
      }
      return typeof props.closable === 'boolean' ? props.closable : closableRef.value;
    });
    setDefaultValue(props.value);
    const handleClick = () => {
      if (props.disabled) {
        return;
      }
      handleTabClick(props.value);
    };
    const handleCloseClick = event => {
      event.stopPropagation();
      handleClose(props.value);
    };
    tabsLength.value = tabsLength.value + 1;
    onBeforeUnmount(() => {
      tabsLength.value = tabsLength.value - 1;
    });
    return () => {
      const defaultSlot = ctx.slots.default;
      return createVNode("div", {
        "key": props.value,
        "onClick": handleClick,
        "class": {
          [`${prefixCls}-tab`]: true,
          [`${prefixCls}-tab-card`]: isCard.value,
          [`${prefixCls}-tab-active`]: valueRef.value === props.value,
          [`${prefixCls}-tab-disabled`]: props.disabled,
          hover: closeModeRef.value === 'hover'
        }
      }, [createVNode("div", {
        "class": `${prefixCls}-tab-label`
      }, [defaultSlot ? defaultSlot() : props.name]), mergeClosable.value && createVNode("div", {
        "class": `${prefixCls}-tab-close`
      }, [createVNode(CloseCircleFilled, {
        "onClick": handleCloseClick
      }, null)])]);
    };
  }
});

export { tab as default };