mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-16 01:41:15 +08:00
add collapse header slot
This commit is contained in:
parent
595f535cd4
commit
c6b5d681c3
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user