perf: layout

pull/5026/head
tangjinzhou 2021-12-11 22:29:29 +08:00
parent 6e5390cec4
commit 9c0464d072
2 changed files with 13 additions and 11 deletions

View File

@ -200,7 +200,7 @@ export default defineComponent({
attrs.class,
);
return (
<aside {...attrs} class={siderCls} style={divStyle} ref={ref}>
<aside {...attrs} class={siderCls} style={divStyle}>
<div class={`${pre}-children`}>{slots.default?.()}</div>
{collapsible || (below.value && zeroWidthTrigger) ? triggerDom : null}
</aside>

View File

@ -1,7 +1,6 @@
import type { ExtractPropTypes, HTMLAttributes } from 'vue';
import { createVNode, defineComponent, provide, ref } from 'vue';
import { computed, createVNode, defineComponent, provide, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames';
import useConfigInject from '../_util/hooks/useConfigInject';
import { SiderHookProviderKey } from './injectionKey';
@ -32,7 +31,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
prefixCls: prefixCls.value,
tagName,
};
return <BasicComponent {...basicComponentProps}>{slots.default?.()}</BasicComponent>;
return <BasicComponent {...basicComponentProps} v-slots={slots}></BasicComponent>;
};
},
});
@ -43,7 +42,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
const Basic = defineComponent({
props: basicProps,
setup(props, { slots }) {
return () => createVNode(props.tagName, { class: props.prefixCls }, slots.default?.());
return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
},
});
@ -62,15 +61,18 @@ const BasicLayout = defineComponent({
};
provide(SiderHookProviderKey, siderHookProvider);
return () => {
const { prefixCls, hasSider, tagName } = props;
const divCls = classNames(prefixCls, {
const divCls = computed(() => {
const { prefixCls, hasSider } = props;
return {
[`${prefixCls}`]: true,
[`${prefixCls}-has-sider`]:
typeof hasSider === 'boolean' ? hasSider : siders.value.length > 0,
[`${prefixCls}-rtl`]: direction.value === 'rtl',
});
return createVNode(tagName, { class: divCls }, slots.default?.());
};
});
return () => {
const { tagName } = props;
return createVNode(tagName, { class: divCls.value }, slots);
};
},
});