add collapse header slot

This commit is contained in:
wangxueliang 2018-02-02 17:19:42 +08:00
parent 595f535cd4
commit c6b5d681c3
3 changed files with 18 additions and 3 deletions

View File

@ -21,7 +21,18 @@ export default {
class: collapsePanelClassName,
on: $listeners,
}
return <RcCollapse.Panel {...rcCollapePanelProps} >{this.$slots.default}</RcCollapse.Panel>
const { default: defaultSlots, header } = this.$slots
return (
<RcCollapse.Panel {...rcCollapePanelProps} >
{defaultSlots}
{header ? (
<template slot='header'>
{header}
</template>
) : null}
</RcCollapse.Panel>
)
},
}
</script>

View File

@ -12,7 +12,10 @@ Customize the background, border and margin styles for each panel.
<template>
<div>
<a-collapse defaultActiveKey="1" :bordered="false">
<a-collapse-panel header="This is panel header 1" key="1" :style="customStyle">
<a-collapse-panel key="1" :style="customStyle">
<template slot="header">
This is panel header 1<a-icon type="question-circle-o" />
</template>
<p>{{text}}</p>
</a-collapse-panel>
<a-collapse-panel header="This is panel header 2" key="2" :style="customStyle">

View File

@ -36,6 +36,7 @@ export default {
[`${prefixCls}-header`]: true,
[headerClass]: headerClass,
}
const headerCon = header || $slots.header
const itemCls = {
[`${prefixCls}-item`]: true,
[`${prefixCls}-item-active`]: isActive,
@ -50,7 +51,7 @@ export default {
aria-expanded={isActive}
>
{showArrow && <i class='arrow' />}
{header}
{headerCon}
</div><transition
{...transitionProps}
>