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

35 lines
914 B
Vue
Raw Normal View History

2021-08-30 09:40:48 +00:00
import { defineComponent, ref, watchEffect } from 'vue';
2021-08-30 14:20:30 +00:00
import { collapsePanelProps } from './commonProps';
2021-08-30 09:40:48 +00:00
import classNames from '../_util/classNames';
export default defineComponent({
name: 'PanelContent',
2021-08-30 14:20:30 +00:00
props: collapsePanelProps(),
2021-08-30 09:40:48 +00:00
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>
);
};
},
});