当前位置：首页 > news >正文

Ant ASpin自定义 indicator 报错

news 2025/7/12 10:20:28

一、问题

二、原因及解决方法

三、总结

一、问题

1.太多地方用到 Aspin了，还要使用h来自己，写style渲染。想着封装一下传值就可以。

2.没想到还搞出问题：线下报错，线上不报错。

3.报错具体如下：

chunk-QEPXSSG5.js?v=da510c8d:7137 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7137:18)at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)at unmount (chunk-QEPXSSG5.js?v=da510c8d:7068:9)at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7147:7)at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)
Promise.then		
callAsyncFunc	@	useAsyncLoading.ts:17
await in callAsyncFunc		
handleCheck	@	OnlineInvoice.vue:256

4.报错的地方是 loading.value=false这行代码,大致意思是组件没有正常卸载。但是我也没有写啥呀。就很常见的逻辑：调接口前loading,调完接口后取消loading而已。

5.具体代码如下：

6.我推测的错误原因：

1)Asteps异步，还没有加载完。但是吧，Asteps完全就是一个样式，和逻辑没有啥关系

2)handleNext影响逻辑，去除，也没有用

3)DeepSeek问了一下，它说可能是CommonDrawer控制显示的isShowModal没有正确执行。试了一直显示也没有用

4)真是奇了怪呀，我啥也没写呀，看着没有问题呀。

二、原因及解决方法

1.问了一下大佬，然后说CommonLoading有问题，我也是蒙圈了。设想了十几种可能性，都是在错误的道路上无效努力。

2.具体代码如下：乍一看，好像没有毛病呀。但是吧，把他注释了还真不报错了。

<template><!-- 加载中 --><ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {fontSize: 12,color: '#B3B3B3',fontWeight: 'bold'
})const indicator = computed(() => {const icon = props.svg ?? Loading3QuartersOutlinedreturn h(icon, {style: {fontSize: `${props.fontSize}px`,fontWeight: props.fontWeight,color: props.color},spin: true})
})
</script>

3.搞不懂，commonLoading是基于ASpin写的，去看看官网怎么写的，结果去官网看了。总结就是直接赋值

4.那我不用computed直接赋值是不是也可以呢？试了一下，还真可以

<template><!-- 加载中 --><ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'
const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {fontSize: 12,color: '#B3B3B3',fontWeight: 'bold'
})const indicator = ref()
function initIndicator() {const icon = props.svg ?? Loading3QuartersOutlinedindicator.value = h(icon, {style: {fontSize: `${props.fontSize}px`,fontWeight: props.fontWeight,color: props.color},spin: true})
}
initIndicator()
</script>

5. 但是我真的不了解呀，为啥用 computed就无法正常卸载。DeepSeek还让我自己写动画来着，然后并没有用。用computed必定会报错@~~@,看不懂