未验证 提交 70ee1c84 编写于 作者: qq_25847755's avatar qq_25847755 提交者: GitHub

refactor: 插槽优先属性调整,prefixCls优先关系调整 (#2570)

上级 73469886
<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>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册