提交 819127e8 编写于 作者: V vben

fix: fix descriotions title not work

上级 b71e4e51
export { default as Description } from './src/index';
import DescriptionLib from './src/index';
import { withInstall } from '../util';
export * from './src/types';
export { useDescription } from './src/useDescription';
export const Description = withInstall(DescriptionLib);
......@@ -2,7 +2,9 @@ import type { DescOptions, DescInstance, DescItem } from './types';
import { defineComponent, computed, ref, unref, CSSProperties } from 'vue';
import { Descriptions } from 'ant-design-vue';
import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
import descProps from './props';
import { isFunction } from '/@/utils/is';
......@@ -17,29 +19,27 @@ export default defineComponent({
emits: ['register'],
setup(props, { attrs, slots, emit }) {
const propsRef = ref<Partial<DescOptions> | null>(null);
// Custom title component: get title
const getMergeProps = computed(() => {
return {
...props,
...unref(propsRef),
};
...(unref(propsRef) as any),
} as DescOptions;
});
const getProps = computed(() => {
const opt = {
...props,
...(unref(propsRef) || {}),
...unref(getMergeProps),
title: undefined,
};
return opt;
return opt as DescOptions;
});
/**
* @description: Whether to setting title
*/
const useWrapper = computed(() => {
return !!unref(getMergeProps).title;
});
const useWrapper = computed(() => !!unref(getMergeProps).title);
/**
* @description: Get configuration Collapse
......@@ -54,6 +54,10 @@ export default defineComponent({
}
);
const getDescriptionsProps = computed(() => {
return { ...attrs, ...unref(getProps) } as DescriptionsProps;
});
/**
* @description:设置desc
*/
......@@ -63,12 +67,6 @@ export default defineComponent({
propsRef.value = cloneDeep(mergeProps);
}
const methods: DescInstance = {
setDescProps,
};
emit('register', methods);
// Prevent line breaks
function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
if (!labelStyle && !labelMinWidth) {
......@@ -87,33 +85,27 @@ export default defineComponent({
const { schema } = unref(getProps);
return unref(schema).map((item) => {
const { render, field, span, show, contentMinWidth } = item;
const { data } = unref(getProps) as any;
const { data } = unref(getProps) as DescOptions;
if (show && isFunction(show) && !show(data)) {
return null;
}
const getContent = () =>
isFunction(render)
? render(data && data[field], data)
: unref(data) && unref(data)[field];
isFunction(render) ? render(data?.[field], data) : unref(data) && unref(data)[field];
const width = contentMinWidth;
return (
<Descriptions.Item label={renderLabel(item)} key={field} span={span}>
{() =>
contentMinWidth ? (
<div
style={{
minWidth: `${width}px`,
}}
>
{getContent()}
</div>
) : (
getContent()
)
}
{() => {
if (!contentMinWidth) {
return getContent();
}
const style: CSSProperties = {
minWidth: `${width}px`,
};
return <div style={style}>{getContent()}</div>;
}}
</Descriptions.Item>
);
});
......@@ -121,7 +113,7 @@ export default defineComponent({
const renderDesc = () => {
return (
<Descriptions class={`${prefixCls}`} {...{ ...attrs, ...(unref(getProps) as any) }}>
<Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
{() => renderItem()}
</Descriptions>
);
......@@ -130,19 +122,29 @@ export default defineComponent({
const renderContainer = () => {
const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
// Reduce the dom level
const { title, canExpand, helpMessage } = unref(getCollapseOptions);
return props.useCollapse ? (
if (!props.useCollapse) {
return content;
}
const { canExpand, helpMessage } = unref(getCollapseOptions);
const { title } = unref(getMergeProps);
return (
<CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
{{
default: () => content,
action: () => getSlot(slots, 'action'),
}}
</CollapseContainer>
) : (
content
);
};
const methods: DescInstance = {
setDescProps,
};
emit('register', methods);
return () => (unref(useWrapper) ? renderContainer() : renderDesc());
},
});
......@@ -5,15 +5,20 @@ import type { DescItem } from './types';
import { propTypes } from '/@/utils/propTypes';
export default {
useCollapse: propTypes.bool.def(true),
title: propTypes.string.def(''),
size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
bordered: propTypes.bool.def(true),
column: {
type: [Number, Object] as PropType<number | any>,
default: () => {
return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
},
},
collapseOptions: {
type: Object as PropType<CollapseContainerOptions>,
default: null,
......
import type { VNode } from 'vue';
import type { VNode, CSSProperties } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container/index';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
export interface DescItem {
labelMinWidth?: number;
contentMinWidth?: number;
labelStyle?: any;
labelStyle?: CSSProperties;
field: string;
label: any;
label: string | VNode | JSX.Element;
// Merge column
span?: number;
show?: (...arg: any) => boolean;
// render
render?: (val: string, data: any) => VNode | undefined | Element | string | number;
render?: (val: string, data: any) => VNode | undefined | JSX.Element | Element | string | number;
}
export interface DescOptions {
export interface DescOptions extends DescriptionsProps {
// Whether to include the collapse component
useCollapse?: boolean;
/**
......@@ -35,52 +36,6 @@ export interface DescOptions {
* @type CollapseContainerOptions
*/
collapseOptions?: CollapseContainerOptions;
/**
* descriptions size type
* @default 'default'
* @type string
*/
size?: 'default' | 'middle' | 'small';
/**
* custom prefixCls
* @type string
*/
prefixCls?: string;
/**
* whether descriptions have border
* @default false
* @type boolean
*/
bordered?: boolean;
/**
* custom title
* @type any
*/
title?: any;
/**
* the number of descriptionsitem in one line
* @default 3
* @type number | object
*/
column?: number | object;
/**
* descriptions layout
* @default 'horizontal'
* @type string
*/
layout?: 'horizontal' | 'vertical';
/**
* whether have colon in descriptionsitem
* @default true
* @type boolean
*/
colon?: boolean;
}
export interface DescInstance {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册