committed by
GitHub
1 changed files with 27 additions and 25 deletions
@ -1,38 +1,40 @@ |
|||
<template> |
|||
<div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]"> |
|||
<BasicTitle :helpMessage="helpMessage" normal> |
|||
<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'; |
|||
<script lang="tsx"> |
|||
import { defineComponent, computed, unref, type ExtractPropTypes } from 'vue'; |
|||
import { useDesign } from '/@/hooks/web/useDesign'; |
|||
import { BasicArrow, BasicTitle } from '/@/components/Basic'; |
|||
|
|||
const props = { |
|||
prefixCls: { type: String }, |
|||
const collapseHeaderProps = { |
|||
prefixCls: String, |
|||
title: String, |
|||
show: Boolean, |
|||
canExpan: Boolean, |
|||
helpMessage: { |
|||
type: [Array, String] as PropType<string[] | string>, |
|||
default: '', |
|||
}, |
|||
title: { type: String }, |
|||
show: { type: Boolean }, |
|||
canExpan: { type: Boolean }, |
|||
}; |
|||
|
|||
export type CollapseHeaderProps = ExtractPropTypes<typeof collapseHeaderProps>; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicArrow, BasicTitle }, |
|||
name: 'CollapseHeader', |
|||
inheritAttrs: false, |
|||
props, |
|||
props: collapseHeaderProps, |
|||
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> |
|||
|
|||
Loading…
Reference in new issue