diff --git a/README.md b/README.md
index 36c335b355f..e16de152411 100644
--- a/README.md
+++ b/README.md
@@ -148,7 +148,7 @@ Support modern browsers, not IE
## Maintainer
-[@Vben](https://github.com/anncwb)。
+[@Vben](https://github.com/anncwb)
## Donate
@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o
![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
-[Paypal Me](https://www.paypal.com/paypalme/cvvben)
+Paypal Me
## Discord
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 78379d881ec..2fb99374152 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -156,7 +156,7 @@ yarn build
![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
-[Paypal Me](https://www.paypal.com/paypalme/cvvben)
+Paypal Me
## 交流
diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts
index d266826924d..d8a7a4fc120 100644
--- a/src/components/Description/index.ts
+++ b/src/components/Description/index.ts
@@ -1,7 +1,7 @@
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const Description = createAsyncComponent(() => import('./src/index'));
-import Description from './src/index';
+import Description from './src/index.vue';
export { Description };
export * from './src/types';
diff --git a/src/components/Description/src/index.tsx b/src/components/Description/src/index.tsx
deleted file mode 100644
index a6ab9955928..00000000000
--- a/src/components/Description/src/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import type { DescOptions, DescInstance, DescItem } from './types';
-
-import { defineComponent, computed, ref, unref, CSSProperties } from 'vue';
-import { get } from 'lodash-es';
-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';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-import { cloneDeep } from 'lodash-es';
-import { deepMerge } from '/@/utils';
-
-const prefixCls = 'description';
-export default defineComponent({
- name: 'Description',
- props: descProps,
- emits: ['register'],
- setup(props, { attrs, slots, emit }) {
- const propsRef = ref | null>(null);
-
- // Custom title component: get title
- const getMergeProps = computed(() => {
- return {
- ...props,
- ...(unref(propsRef) as Recordable),
- } as DescOptions;
- });
-
- const getProps = computed(() => {
- const opt = {
- ...unref(getMergeProps),
- title: undefined,
- };
- return opt as DescOptions;
- });
-
- /**
- * @description: Whether to setting title
- */
- const useWrapper = computed(() => !!unref(getMergeProps).title);
-
- /**
- * @description: Get configuration Collapse
- */
- const getCollapseOptions = computed(
- (): CollapseContainerOptions => {
- return {
- // Cannot be expanded by default
- canExpand: false,
- ...unref(getProps).collapseOptions,
- };
- }
- );
-
- const getDescriptionsProps = computed(() => {
- return { ...attrs, ...unref(getProps) } as DescriptionsProps;
- });
-
- /**
- * @description:设置desc
- */
- function setDescProps(descProps: Partial): void {
- // Keep the last setDrawerProps
- const mergeProps = deepMerge(unref(propsRef) || {}, descProps);
- propsRef.value = cloneDeep(mergeProps);
- }
-
- // Prevent line breaks
- function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
- if (!labelStyle && !labelMinWidth) {
- return label;
- }
-
- const labelStyles: CSSProperties = {
- ...labelStyle,
-
- minWidth: `${labelMinWidth}px `,
- };
- return {label}
;
- }
-
- function renderItem() {
- const { schema, data } = unref(getProps);
- return unref(schema)
- .map((item) => {
- const { render, field, span, show, contentMinWidth } = item;
-
- if (show && isFunction(show) && !show(data)) {
- return null;
- }
-
- const getContent = () => {
- const _data = unref(data);
- const getField = get(_data, field);
- return isFunction(render) ? render(getField, _data) : getField ?? '';
- };
-
- const width = contentMinWidth;
- return (
-
- {() => {
- if (!contentMinWidth) {
- return getContent();
- }
- const style: CSSProperties = {
- minWidth: `${width}px`,
- };
- return {getContent()}
;
- }}
-
- );
- })
- .filter((item) => !!item);
- }
-
- const renderDesc = () => {
- return (
-
- {renderItem()}
-
- );
- };
-
- const renderContainer = () => {
- const content = props.useCollapse ? renderDesc() : {renderDesc()}
;
- // Reduce the dom level
-
- if (!props.useCollapse) {
- return content;
- }
-
- const { canExpand, helpMessage } = unref(getCollapseOptions);
- const { title } = unref(getMergeProps);
-
- return (
-
- {{
- default: () => content,
- action: () => getSlot(slots, 'action'),
- }}
-
- );
- };
-
- const methods: DescInstance = {
- setDescProps,
- };
-
- emit('register', methods);
- return () => (unref(useWrapper) ? renderContainer() : renderDesc());
- },
-});
diff --git a/src/components/Description/src/index.vue b/src/components/Description/src/index.vue
new file mode 100644
index 00000000000..129c7d6d049
--- /dev/null
+++ b/src/components/Description/src/index.vue
@@ -0,0 +1,164 @@
+
diff --git a/src/components/Description/src/props.ts b/src/components/Description/src/props.ts
index 7cd920030cb..0c81d4df8a4 100644
--- a/src/components/Description/src/props.ts
+++ b/src/components/Description/src/props.ts
@@ -1,24 +1,18 @@
import type { PropType } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container';
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,
default: () => {
return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
},
},
-
collapseOptions: {
type: Object as PropType,
default: null,
diff --git a/src/components/Page/src/PageFooter.vue b/src/components/Page/src/PageFooter.vue
index 1bfb696217b..07d0d8f596c 100644
--- a/src/components/Page/src/PageFooter.vue
+++ b/src/components/Page/src/PageFooter.vue
@@ -17,6 +17,7 @@
export default defineComponent({
name: 'PageFooter',
+ inheritAttrs: false,
setup() {
const { prefixCls } = useDesign('page-footer');
const { getCalcContentWidth } = useMenuSetting();
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index 045981aecbb..8ef95e3d36a 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -37,6 +37,7 @@
import { PageHeader } from 'ant-design-vue';
export default defineComponent({
name: 'PageWrapper',
+ inheritAttrs: false,
components: { PageFooter, PageHeader },
props: {
dense: propTypes.bool,
diff --git a/src/views/demo/comp/desc/index.vue b/src/views/demo/comp/desc/index.vue
index fce2caa68b7..2074fbf5ae6 100644
--- a/src/views/demo/comp/desc/index.vue
+++ b/src/views/demo/comp/desc/index.vue
@@ -72,12 +72,13 @@
schema: schema,
});
- const [register1] = useDescription({
+ const [register1, { setDescProps }] = useDescription({
title: '无边框',
bordered: false,
data: mockData,
schema: schema,
});
+
return { mockData, schema, register, register1 };
},
});