import { cloneVNode , computed , defineComponent } from 'vue' ; import { getPrefixCls } from '../_utils/global-config' ; import IconLoading from '../icon/icon-loading' ; import DotLoading from './dot-loading' ; import { getFirstComponent } from '../_utils/vue-utils' ; export default defineComponent ( { name : 'Spin' , props : { zh en size : { type : Number } , zh en loading : Boolean , zh en dot : Boolean , zh en tip : String } , zh en slot zh en slot setup ( props , { slots , attrs } ) { const prefixCls = getPrefixCls ( 'spin' ) ; const cls = computed ( ( ) => [ prefixCls , { [ `${ prefixCls }-loading` ] : props . loading , [ `${ prefixCls }-with-tip` ] : props . tip && ! slots . default } , ] ) ; const renderIcon = ( ) => { if ( slots . icon ) { const iconVNode = getFirstComponent ( slots . icon ( ) ) ; if ( iconVNode ) { return cloneVNode ( iconVNode , { spin : true } ) ; } } if ( slots . element ) { return slots . element ( ) ; } if ( props . dot ) { return < DotLoading size = { props . size } />; } return < IconLoading spin = { true } />; } ; const renderSpinIcon = ( ) => { const style = props . size ? { fontSize : `${ props . size }px` } : undefined ; return ( < > < div class = { `${ prefixCls }-icon` } style = { style } > { renderIcon ( ) } < /div> { props . tip && < div class = { `${ prefixCls }-tip` } > { props . tip } < /div>} < />); } ; return ( ) => ( < div class = { cls . value } > { slots . default ? ( < > { slots . default ( ) } { props . loading && ( < div class = { `${ prefixCls }-mask` } > < div class = { `${ prefixCls }-mask-icon` } > { renderSpinIcon ( ) } < /div> < /div>)} < />) : (renderSpinIcon())} < /div>); } } ) ;