51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import type { PropType } from 'vue'
|
|
import { defineComponent } from 'vue'
|
|
import { getPrefixCls } from '../_utils/getPrefixCls'
|
|
import Icon from '../icon'
|
|
import './index.scss'
|
|
|
|
export default defineComponent({
|
|
name: 'Spin',
|
|
props: {
|
|
loading: { type: Boolean, default: false },
|
|
opacity: { type: Number as PropType<number>, default: 0.6 },
|
|
rounded: { type: Boolean, default: true },
|
|
icon: { type: String as PropType<string>, default: 'mingcute:loading-line' },
|
|
size: { type: Number as PropType<number>, default: 16 },
|
|
rotate: { type: Number as PropType<number>, default: 360 },
|
|
tip: { type: String as PropType<string>, default: '' },
|
|
},
|
|
setup(props, { slots }) {
|
|
const prefixCls = getPrefixCls('spin')
|
|
|
|
return () => {
|
|
if (!props.loading && !slots.default)
|
|
return null
|
|
|
|
return (
|
|
<div class={`${prefixCls}-wrapper`}>
|
|
{slots.default?.()}
|
|
{props.loading && (
|
|
<div
|
|
class={`${prefixCls}`}
|
|
style={{
|
|
background: slots.default ? `rgba(255,255,255,${props.opacity})` : 'transparent',
|
|
borderRadius: props.rounded ? '4px' : 0,
|
|
}}
|
|
>
|
|
<div class={`${prefixCls}-content`}>
|
|
<Icon
|
|
icon={props.icon}
|
|
size={props.size}
|
|
spin
|
|
/>
|
|
{props.tip && <span class={`${prefixCls}-tip`}>{props.tip}</span>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
})
|