github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

perf: timeline

pull/6265/head^2
tangjinzhou 2023-02-15 14:03:11 +08:00
parent 587c1ca89d
commit 04e3819b0b
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/timeline/TimelineItem.tsx
View File

@ -1,6 +1,5 @@
import type { ExtractPropTypes } from 'vue'; import type { ExtractPropTypes } from 'vue';
import { defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import initDefaultProps from '../_util/props-util/initDefaultProps'; import initDefaultProps from '../_util/props-util/initDefaultProps';
import { tuple, booleanType } from '../_util/type'; import { tuple, booleanType } from '../_util/type';
@ -27,24 +26,28 @@ export default defineComponent({
slots: ['dot', 'label'], slots: ['dot', 'label'],
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls } = useConfigInject('timeline', props); const { prefixCls } = useConfigInject('timeline', props);
return () => { const itemClassName = computed(() => ({
const { color = '', pending, label = slots.label?.(), dot = slots.dot?.() } = props; [`${prefixCls.value}-item`]: true,
const itemClassName = classNames({ [`${prefixCls.value}-item-pending`]: props.pending,
[`${prefixCls.value}-item`]: true, }));
[`${prefixCls.value}-item-pending`]: pending,
});
const dotClassName = classNames({ const customColor = computed(() =>
[`${prefixCls.value}-item-head`]: true, /blue|red|green|gray/.test(props.color || '') ? undefined : props.color || 'blue',
[`${prefixCls.value}-item-head-custom`]: dot, );
[`${prefixCls.value}-item-head-${color}`]: true, const dotClassName = computed(() => ({
}); [`${prefixCls.value}-item-head`]: true,
const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color; [`${prefixCls.value}-item-head-${props.color || 'blue'}`]: !customColor.value,
}));
return () => {
const { label = slots.label?.(), dot = slots.dot?.() } = props;
return ( return (
<li class={itemClassName}> <li class={itemClassName.value}>
{label && <div class={`${prefixCls.value}-item-label`}>{label}</div>} {label && <div class={`${prefixCls.value}-item-label`}>{label}</div>}
<div class={`${prefixCls.value}-item-tail`} /> <div class={`${prefixCls.value}-item-tail`} />
<div class={dotClassName} style={{ borderColor: customColor, color: customColor }}> <div
class={[dotClassName.value, !!dot && `${prefixCls.value}-item-head-custom`]}
style={{ borderColor: customColor.value, color: customColor.value }}
>
{dot} {dot}
</div> </div>
<div class={`${prefixCls.value}-item-content`}>{slots.default?.()}</div> <div class={`${prefixCls.value}-item-content`}>{slots.default?.()}</div>