ant-design-vue/components/collapse/PanelContent.tsx

35 lines
914 B
Vue

import { defineComponent, ref, watchEffect } from 'vue';
import { collapsePanelProps } from './commonProps';
import classNames from '../_util/classNames';
export default defineComponent({
name: 'PanelContent',
props: collapsePanelProps(),
setup(props, { slots }) {
const rendered = ref(false);
watchEffect(() => {
if (props.isActive || props.forceRender) {
rendered.value = true;
}
});
return () => {
if (!rendered.value) return null;
const { prefixCls, isActive, role } = props;
return (
<div
ref={ref}
class={classNames(`${prefixCls}-content`, {
[`${prefixCls}-content-active`]: isActive,
[`${prefixCls}-content-inactive`]: !isActive,
})}
role={role}
>
<div class={`${prefixCls}-content-box`}>{slots.default?.()}</div>
</div>
);
};
},
});