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, class: collapsePanelClassName,
on: $listeners, 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> </script>

View File

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

View File

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