diff --git a/packages/components/empty/empty.tsx b/packages/components/empty/empty.tsx index f9ad484a61..35a9931388 100644 --- a/packages/components/empty/empty.tsx +++ b/packages/components/empty/empty.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, h, toRefs } from 'vue'; +import { computed, ComputedRef, defineComponent, h, toRefs } from 'vue'; import { isString, isPlainObject } from 'lodash-es'; import { useConfig, useTNodeJSX, usePrefixClass, useCommonClassName } from '@tdesign/shared-hooks'; @@ -24,30 +24,32 @@ export default defineComponent({ const { SIZE } = useCommonClassName(); const renderTNodeJSX = useTNodeJSX(); - const defaultMaps: { + const defaultMaps: ComputedRef<{ [key in TdEmptyProps['type']]?: Pick; - } = { - maintenance: { - image: globalConfig.value.image.maintenance || MaintenanceSvg, - title: globalConfig.value.titleText.maintenance, - }, - success: { - image: globalConfig.value.image.success || SuccessSvg, - title: globalConfig.value.titleText.success, - }, - fail: { - image: globalConfig.value.image.fail || FailSvg, - title: globalConfig.value.titleText.fail, - }, - 'network-error': { - image: globalConfig.value.image.networkError || NetworkErrorSvg, - title: globalConfig.value.titleText.networkError, - }, - empty: { - image: globalConfig.value.image.empty || EmptySvg, - title: globalConfig.value.titleText.empty, - }, - }; + }> = computed(() => { + return { + maintenance: { + image: globalConfig.value.image.maintenance || MaintenanceSvg, + title: globalConfig.value.titleText.maintenance, + }, + success: { + image: globalConfig.value.image.success || SuccessSvg, + title: globalConfig.value.titleText.success, + }, + fail: { + image: globalConfig.value.image.fail || FailSvg, + title: globalConfig.value.titleText.fail, + }, + 'network-error': { + image: globalConfig.value.image.networkError || NetworkErrorSvg, + title: globalConfig.value.titleText.networkError, + }, + empty: { + image: globalConfig.value.image.empty || EmptySvg, + title: globalConfig.value.titleText.empty, + }, + }; + }); const emptyClasses = computed(() => [classPrefix.value, SIZE.value[size.value]]); const titleClasses = [`${classPrefix.value}__title`]; @@ -55,7 +57,7 @@ export default defineComponent({ const descriptionClasses = [`${classPrefix.value}__description`]; const actionClass = [`${classPrefix.value}__action`]; - const typeImageProps = computed(() => defaultMaps[type.value] ?? null); + const typeImageProps = computed(() => defaultMaps.value[type.value] ?? null); const showImage = computed(() => propsImage.value || slots?.image?.() || typeImageProps.value?.image); const showTitle = computed(() => propsTitle.value || slots?.title?.() || typeImageProps.value?.title); const showDescription = computed(() => propsDescription.value || slots?.description?.()); diff --git a/packages/tdesign-vue-next/.changelog/pr-6126.md b/packages/tdesign-vue-next/.changelog/pr-6126.md new file mode 100644 index 0000000000..a7f2d2d125 --- /dev/null +++ b/packages/tdesign-vue-next/.changelog/pr-6126.md @@ -0,0 +1,6 @@ +--- +pr_number: 6126 +contributor: liweijie0812 +--- + +- fix(empty): 修复多语言动态切换响应式无效 @liweijie0812 ([#6126](https://github.com/Tencent/tdesign-vue-next/pull/6126))