mirror of
https://github.com/antd-tiny-vue/antd-tiny-vue.git
synced 2024-11-10 09:39:15 +08:00
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
|
import { defineComponent } from 'vue'
|
||
|
|
import { booleanType, someType, stringType } from '@v-c/utils'
|
||
|
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
|
||
|
|
|
||
|
|
export interface LoadingIconProps {
|
||
|
|
prefixCls: string
|
||
|
|
existIcon: boolean
|
||
|
|
loading?: boolean | object
|
||
|
|
}
|
||
|
|
export const loadingIconProps = {
|
||
|
|
prefixCls: stringType(),
|
||
|
|
existIcon: booleanType(),
|
||
|
|
loading: someType<boolean | object>([Boolean, Object])
|
||
|
|
}
|
||
|
|
|
||
|
|
// const getCollapsedWidth = (): CSSProperties => ({
|
||
|
|
// width: 0,
|
||
|
|
// opacity: 0,
|
||
|
|
// transform: 'scale(0)'
|
||
|
|
// })
|
||
|
|
//
|
||
|
|
// const getRealWidth = (node: HTMLElement): CSSProperties => ({
|
||
|
|
// width: node.scrollWidth,
|
||
|
|
// opacity: 1,
|
||
|
|
// transform: 'scale(1)'
|
||
|
|
// })
|
||
|
|
|
||
|
|
const LoadingIcon = defineComponent({
|
||
|
|
name: 'LoadingIcon',
|
||
|
|
props: loadingIconProps,
|
||
|
|
setup(props) {
|
||
|
|
return () => {
|
||
|
|
const { existIcon, prefixCls } = props
|
||
|
|
// const visible = !!loading
|
||
|
|
if (existIcon) {
|
||
|
|
return (
|
||
|
|
<span class={`${prefixCls}-loading-icon`}>
|
||
|
|
<LoadingOutlined />
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
export default LoadingIcon
|