ant-design-vue/components/breadcrumb/BreadcrumbSeparator.tsx
2023-01-27 16:00:17 +08:00

33 lines
1.0 KiB
Vue

import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue';
import { flattenChildren } from '../_util/props-util';
import useConfigInject from '../config-provider/hooks/useConfigInject';
export const breadcrumbSeparatorProps = () => ({
prefixCls: String,
});
export type BreadcrumbSeparatorProps = Partial<
ExtractPropTypes<ReturnType<typeof breadcrumbSeparatorProps>>
>;
export default defineComponent({
compatConfig: { MODE: 3 },
name: 'ABreadcrumbSeparator',
__ANT_BREADCRUMB_SEPARATOR: true,
inheritAttrs: false,
props: breadcrumbSeparatorProps(),
setup(props, { slots, attrs }) {
const { prefixCls } = useConfigInject('breadcrumb', props);
return () => {
const { separator, class: className, ...restAttrs } = attrs;
const children = flattenChildren(slots.default?.());
return (
<span class={[`${prefixCls.value}-separator`, className]} {...restAttrs}>
{children.length > 0 ? children : '/'}
</span>
);
};
},
});