提交 ce93e46f 作者: Vben

fix(description): ensure that props respond

上级 ee5fb223
...@@ -148,7 +148,7 @@ Support modern browsers, not IE ...@@ -148,7 +148,7 @@ Support modern browsers, not IE
## Maintainer ## Maintainer
[@Vben](https://github.com/anncwb) [@Vben](https://github.com/anncwb)
## Donate ## Donate
...@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o ...@@ -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) ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/cvvben) <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## Discord ## Discord
......
...@@ -156,7 +156,7 @@ yarn build ...@@ -156,7 +156,7 @@ yarn build
![donate](https://anncwb.github.io/anncwb/images/sponsor.png) ![donate](https://anncwb.github.io/anncwb/images/sponsor.png)
[Paypal Me](https://www.paypal.com/paypalme/cvvben) <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
## 交流 ## 交流
......
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const Description = createAsyncComponent(() => import('./src/index')); // export const Description = createAsyncComponent(() => import('./src/index'));
import Description from './src/index'; import Description from './src/index.vue';
export { Description }; export { Description };
export * from './src/types'; export * from './src/types';
......
import type { DescOptions, DescInstance, DescItem } from './types'; <script lang="tsx">
import type { DescOptions, DescInstance, DescItem } from './types';
import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
import type { CSSProperties } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container/index';
import { defineComponent, computed, ref, unref, CSSProperties } from 'vue'; import { defineComponent, computed, ref, unref } from 'vue';
import { get } from 'lodash-es'; import { get } from 'lodash-es';
import { Descriptions } from 'ant-design-vue'; import { Descriptions } from 'ant-design-vue';
import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index'; import { CollapseContainer } from '/@/components/Container/index';
import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
import descProps from './props'; import { useDesign } from '/@/hooks/web/useDesign';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper'; import { getSlot } from '/@/utils/helper/tsxHelper';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { deepMerge } from '/@/utils'; import { deepMerge } from '/@/utils';
const prefixCls = 'description'; import descProps from './props';
export default defineComponent({ import { useAttrs } from '/@/hooks/core/useAttrs';
export default defineComponent({
name: 'Description', name: 'Description',
props: descProps, props: descProps,
emits: ['register'], emits: ['register'],
setup(props, { attrs, slots, emit }) { setup(props, { slots, emit }) {
const propsRef = ref<Partial<DescOptions> | null>(null); const propsRef = ref<Partial<DescOptions> | null>(null);
const { prefixCls } = useDesign('description');
const attrs = useAttrs();
// Custom title component: get title // Custom title component: get title
const getMergeProps = computed(() => { const getMergeProps = computed(() => {
return { return {
...@@ -56,7 +64,7 @@ export default defineComponent({ ...@@ -56,7 +64,7 @@ export default defineComponent({
); );
const getDescriptionsProps = computed(() => { const getDescriptionsProps = computed(() => {
return { ...attrs, ...unref(getProps) } as DescriptionsProps; return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
}); });
/** /**
...@@ -64,8 +72,7 @@ export default defineComponent({ ...@@ -64,8 +72,7 @@ export default defineComponent({
*/ */
function setDescProps(descProps: Partial<DescOptions>): void { function setDescProps(descProps: Partial<DescOptions>): void {
// Keep the last setDrawerProps // Keep the last setDrawerProps
const mergeProps = deepMerge(unref(propsRef) || {}, descProps); propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
propsRef.value = cloneDeep(mergeProps);
} }
// Prevent line breaks // Prevent line breaks
...@@ -93,7 +100,8 @@ export default defineComponent({ ...@@ -93,7 +100,8 @@ export default defineComponent({
} }
const getContent = () => { const getContent = () => {
const _data = unref(data); const _data = unref(getProps)?.data;
if (!_data) return null;
const getField = get(_data, field); const getField = get(_data, field);
return isFunction(render) ? render(getField, _data) : getField ?? ''; return isFunction(render) ? render(getField, _data) : getField ?? '';
}; };
...@@ -152,4 +160,5 @@ export default defineComponent({ ...@@ -152,4 +160,5 @@ export default defineComponent({
emit('register', methods); emit('register', methods);
return () => (unref(useWrapper) ? renderContainer() : renderDesc()); return () => (unref(useWrapper) ? renderContainer() : renderDesc());
}, },
}); });
</script>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { CollapseContainerOptions } from '/@/components/Container'; import type { CollapseContainerOptions } from '/@/components/Container';
import type { DescItem } from './types'; 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 | Recordable>, type: [Number, Object] as PropType<number | Recordable>,
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,
......
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
export default defineComponent({ export default defineComponent({
name: 'PageFooter', name: 'PageFooter',
inheritAttrs: false,
setup() { setup() {
const { prefixCls } = useDesign('page-footer'); const { prefixCls } = useDesign('page-footer');
const { getCalcContentWidth } = useMenuSetting(); const { getCalcContentWidth } = useMenuSetting();
......
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
import { PageHeader } from 'ant-design-vue'; import { PageHeader } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
name: 'PageWrapper', name: 'PageWrapper',
inheritAttrs: false,
components: { PageFooter, PageHeader }, components: { PageFooter, PageHeader },
props: { props: {
dense: propTypes.bool, dense: propTypes.bool,
......
...@@ -72,12 +72,13 @@ ...@@ -72,12 +72,13 @@
schema: schema, schema: schema,
}); });
const [register1] = useDescription({ const [register1, { setDescProps }] = useDescription({
title: '无边框', title: '无边框',
bordered: false, bordered: false,
data: mockData, data: mockData,
schema: schema, schema: schema,
}); });
return { mockData, schema, register, register1 }; return { mockData, schema, register, register1 };
}, },
}); });
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论