committed by
GitHub
1 changed files with 27 additions and 25 deletions
@ -1,38 +1,40 @@ |
|||||
<template> |
<script lang="tsx"> |
||||
<div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]"> |
import { defineComponent, computed, unref, type ExtractPropTypes } from 'vue'; |
||||
<BasicTitle :helpMessage="helpMessage" normal> |
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
<template v-if="title"> |
|
||||
{{ title }} |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<slot name="title"></slot> |
|
||||
</template> |
|
||||
</BasicTitle> |
|
||||
<div :class="`${prefixCls}__action`"> |
|
||||
<slot name="action"></slot> |
|
||||
<BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts"> |
|
||||
import { defineComponent } from 'vue'; |
|
||||
import { BasicArrow, BasicTitle } from '/@/components/Basic'; |
import { BasicArrow, BasicTitle } from '/@/components/Basic'; |
||||
|
|
||||
const props = { |
const collapseHeaderProps = { |
||||
prefixCls: { type: String }, |
prefixCls: String, |
||||
|
title: String, |
||||
|
show: Boolean, |
||||
|
canExpan: Boolean, |
||||
helpMessage: { |
helpMessage: { |
||||
type: [Array, String] as PropType<string[] | string>, |
type: [Array, String] as PropType<string[] | string>, |
||||
default: '', |
default: '', |
||||
}, |
}, |
||||
title: { type: String }, |
|
||||
show: { type: Boolean }, |
|
||||
canExpan: { type: Boolean }, |
|
||||
}; |
}; |
||||
|
|
||||
|
export type CollapseHeaderProps = ExtractPropTypes<typeof collapseHeaderProps>; |
||||
|
|
||||
export default defineComponent({ |
export default defineComponent({ |
||||
components: { BasicArrow, BasicTitle }, |
name: 'CollapseHeader', |
||||
inheritAttrs: false, |
inheritAttrs: false, |
||||
props, |
props: collapseHeaderProps, |
||||
emits: ['expand'], |
emits: ['expand'], |
||||
|
setup(props, { slots, attrs, emit }) { |
||||
|
const { prefixCls } = useDesign('collapse-container'); |
||||
|
const _prefixCls = computed(() => props.prefixCls || unref(prefixCls)); |
||||
|
return () => ( |
||||
|
<div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}> |
||||
|
<BasicTitle helpMessage={props.helpMessage} normal> |
||||
|
{slots.title?.() || props.title} |
||||
|
</BasicTitle> |
||||
|
|
||||
|
<div class={`${unref(_prefixCls)}__action`}> |
||||
|
{props.canExpan && <BasicArrow up expand={props.show} onClick={() => emit('expand')} />} |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}, |
||||
}); |
}); |
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue