You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
937 B
35 lines
937 B
import { defineComponent, shallowRef, watchEffect } from 'vue';
|
|
import { collapsePanelProps } from './commonProps';
|
|
import classNames from '../_util/classNames';
|
|
|
|
export default defineComponent({
|
|
compatConfig: { MODE: 3 },
|
|
name: 'PanelContent',
|
|
props: collapsePanelProps(),
|
|
setup(props, { slots }) {
|
|
const rendered = shallowRef(false);
|
|
|
|
watchEffect(() => {
|
|
if (props.isActive || props.forceRender) {
|
|
rendered.value = true;
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
if (!rendered.value) return null;
|
|
const { prefixCls, isActive, role } = props;
|
|
return (
|
|
<div
|
|
class={classNames(`${prefixCls}-content`, {
|
|
[`${prefixCls}-content-active`]: isActive,
|
|
[`${prefixCls}-content-inactive`]: !isActive,
|
|
})}
|
|
role={role}
|
|
>
|
|
<div class={`${prefixCls}-content-box`}>{slots.default?.()}</div>
|
|
</div>
|
|
);
|
|
};
|
|
},
|
|
});
|