import { defineComponent, nextTick } from 'vue'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; import Transition from '../_util/transition'; const getCollapsedWidth = (node: HTMLSpanElement) => { if (node) { node.style.width = '0px'; node.style.opacity = '0'; node.style.transform = 'scale(0)'; } }; const getRealWidth = (node: HTMLSpanElement) => { nextTick(() => { if (node) { node.style.width = `${node.scrollWidth}px`; node.style.opacity = '1'; node.style.transform = 'scale(1)'; } }); }; const resetStyle = (node: HTMLSpanElement) => { if (node && node.style) { node.style.width = null; node.style.opacity = null; node.style.transform = null; } }; export default defineComponent({ compatConfig: { MODE: 3 }, name: 'LoadingIcon', props: { prefixCls: String, loading: [Boolean, Object], existIcon: Boolean, }, setup(props) { return () => { const { existIcon, prefixCls, loading } = props; if (existIcon) { return ( ); } const visible = !!loading; return ( { setTimeout(() => { getCollapsedWidth(node); }); }} onAfterLeave={resetStyle} > {visible ? ( ) : null} ); }; }, });