🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
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.
 
 
 
 

50 lines
1.6 KiB

import { defineComponent, inject } from 'vue';
import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
import VcCollapse from '../vc-collapse';
import { defaultConfigProvider } from '../config-provider';
import PropTypes from '../_util/vue-types';
export default defineComponent({
name: 'ACollapsePanel',
inheritAttrs: false,
props: {
openAnimation: PropTypes.object,
prefixCls: PropTypes.string,
header: PropTypes.VNodeChild,
headerClass: PropTypes.string,
showArrow: PropTypes.looseBool,
isActive: PropTypes.looseBool,
destroyInactivePanel: PropTypes.looseBool,
disabled: PropTypes.looseBool,
accordion: PropTypes.looseBool,
forceRender: PropTypes.looseBool,
expandIcon: PropTypes.func,
extra: PropTypes.VNodeChild,
panelKey: PropTypes.VNodeChild,
},
setup() {
return {
configProvider: inject('configProvider', defaultConfigProvider),
};
},
render() {
const { prefixCls: customizePrefixCls, showArrow = true } = this;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('collapse', customizePrefixCls);
const { class: className, ...restAttrs } = this.$attrs;
const collapsePanelClassName = {
[className as string]: className,
[`${prefixCls}-no-arrow`]: !showArrow,
};
const rcCollapePanelProps = {
...getOptionProps(this),
header: getComponent(this, 'header'),
prefixCls,
extra: getComponent(this, 'extra'),
class: collapsePanelClassName,
...restAttrs,
};
return <VcCollapse.Panel {...rcCollapePanelProps}>{getSlot(this)}</VcCollapse.Panel>;
},
});