提交 819127e8 作者: 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 * from './src/types';
export { useDescription } from './src/useDescription'; export { useDescription } from './src/useDescription';
export const Description = withInstall(DescriptionLib);
...@@ -2,7 +2,9 @@ import type { DescOptions, DescInstance, DescItem } from './types'; ...@@ -2,7 +2,9 @@ import type { DescOptions, DescInstance, DescItem } from './types';
import { defineComponent, computed, ref, unref, CSSProperties } from 'vue'; import { defineComponent, computed, ref, unref, CSSProperties } from 'vue';
import { Descriptions } from 'ant-design-vue'; import { Descriptions } from 'ant-design-vue';
import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index'; import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
import descProps from './props'; import descProps from './props';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
...@@ -17,29 +19,27 @@ export default defineComponent({ ...@@ -17,29 +19,27 @@ export default defineComponent({
emits: ['register'], emits: ['register'],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit }) {
const propsRef = ref<Partial<DescOptions> | null>(null); const propsRef = ref<Partial<DescOptions> | null>(null);
// Custom title component: get title // Custom title component: get title
const getMergeProps = computed(() => { const getMergeProps = computed(() => {
return { return {
...props, ...props,
...unref(propsRef), ...(unref(propsRef) as any),
}; } as DescOptions;
}); });
const getProps = computed(() => { const getProps = computed(() => {
const opt = { const opt = {
...props, ...unref(getMergeProps),
...(unref(propsRef) || {}),
title: undefined, title: undefined,
}; };
return opt; return opt as DescOptions;
}); });
/** /**
* @description: Whether to setting title * @description: Whether to setting title
*/ */
const useWrapper = computed(() => { const useWrapper = computed(() => !!unref(getMergeProps).title);
return !!unref(getMergeProps).title;
});
/** /**
* @description: Get configuration Collapse * @description: Get configuration Collapse
...@@ -54,6 +54,10 @@ export default defineComponent({ ...@@ -54,6 +54,10 @@ export default defineComponent({
} }
); );
const getDescriptionsProps = computed(() => {
return { ...attrs, ...unref(getProps) } as DescriptionsProps;
});
/** /**
* @description:设置desc * @description:设置desc
*/ */
...@@ -63,12 +67,6 @@ export default defineComponent({ ...@@ -63,12 +67,6 @@ export default defineComponent({
propsRef.value = cloneDeep(mergeProps); propsRef.value = cloneDeep(mergeProps);
} }
const methods: DescInstance = {
setDescProps,
};
emit('register', methods);
// Prevent line breaks // Prevent line breaks
function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) { function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
if (!labelStyle && !labelMinWidth) { if (!labelStyle && !labelMinWidth) {
...@@ -87,33 +85,27 @@ export default defineComponent({ ...@@ -87,33 +85,27 @@ export default defineComponent({
const { schema } = unref(getProps); const { schema } = unref(getProps);
return unref(schema).map((item) => { return unref(schema).map((item) => {
const { render, field, span, show, contentMinWidth } = 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)) { if (show && isFunction(show) && !show(data)) {
return null; return null;
} }
const getContent = () => const getContent = () =>
isFunction(render) isFunction(render) ? render(data?.[field], data) : unref(data) && unref(data)[field];
? render(data && data[field], data)
: unref(data) && unref(data)[field];
const width = contentMinWidth; const width = contentMinWidth;
return ( return (
<Descriptions.Item label={renderLabel(item)} key={field} span={span}> <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
{() => {() => {
contentMinWidth ? ( if (!contentMinWidth) {
<div return getContent();
style={{ }
minWidth: `${width}px`, const style: CSSProperties = {
}} minWidth: `${width}px`,
> };
{getContent()} return <div style={style}>{getContent()}</div>;
</div> }}
) : (
getContent()
)
}
</Descriptions.Item> </Descriptions.Item>
); );
}); });
...@@ -121,7 +113,7 @@ export default defineComponent({ ...@@ -121,7 +113,7 @@ export default defineComponent({
const renderDesc = () => { const renderDesc = () => {
return ( return (
<Descriptions class={`${prefixCls}`} {...{ ...attrs, ...(unref(getProps) as any) }}> <Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
{() => renderItem()} {() => renderItem()}
</Descriptions> </Descriptions>
); );
...@@ -130,19 +122,29 @@ export default defineComponent({ ...@@ -130,19 +122,29 @@ export default defineComponent({
const renderContainer = () => { const renderContainer = () => {
const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>; const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
// Reduce the dom level // 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}> <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
{{ {{
default: () => content, default: () => content,
action: () => getSlot(slots, 'action'), action: () => getSlot(slots, 'action'),
}} }}
</CollapseContainer> </CollapseContainer>
) : (
content
); );
}; };
const methods: DescInstance = {
setDescProps,
};
emit('register', methods);
return () => (unref(useWrapper) ? renderContainer() : renderDesc()); return () => (unref(useWrapper) ? renderContainer() : renderDesc());
}, },
}); });
...@@ -5,15 +5,20 @@ import type { DescItem } from './types'; ...@@ -5,15 +5,20 @@ import type { DescItem } from './types';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
export default { export default {
useCollapse: propTypes.bool.def(true), useCollapse: propTypes.bool.def(true),
title: propTypes.string.def(''), title: propTypes.string.def(''),
size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'), size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
bordered: propTypes.bool.def(true), bordered: propTypes.bool.def(true),
column: { column: {
type: [Number, Object] as PropType<number | any>, type: [Number, Object] as PropType<number | any>,
default: () => { default: () => {
return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }; return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
}, },
}, },
collapseOptions: { collapseOptions: {
type: Object as PropType<CollapseContainerOptions>, type: Object as PropType<CollapseContainerOptions>,
default: null, default: null,
......
import type { VNode } from 'vue'; import type { VNode, CSSProperties } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container/index'; import type { CollapseContainerOptions } from '/@/components/Container/index';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
export interface DescItem { export interface DescItem {
labelMinWidth?: number; labelMinWidth?: number;
contentMinWidth?: number; contentMinWidth?: number;
labelStyle?: any; labelStyle?: CSSProperties;
field: string; field: string;
label: any; label: string | VNode | JSX.Element;
// Merge column // Merge column
span?: number; span?: number;
show?: (...arg: any) => boolean; show?: (...arg: any) => boolean;
// render // 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 // Whether to include the collapse component
useCollapse?: boolean; useCollapse?: boolean;
/** /**
...@@ -35,52 +36,6 @@ export interface DescOptions { ...@@ -35,52 +36,6 @@ export interface DescOptions {
* @type CollapseContainerOptions * @type CollapseContainerOptions
*/ */
collapseOptions?: 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 { export interface DescInstance {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论