32 lines
703 B
Vue
32 lines
703 B
Vue
 
|
<script setup lang="ts">
|
||
|
|
import { computed, toRef } from 'vue';
|
||
|
|
import { Skeleton, theme } from 'ant-design-vue';
|
||
|
|
import { useCrmSkeletonLoading } from './context';
|
||
|
|
|
||
|
|
const ASkeletonAvatar = Skeleton.Avatar;
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
loading?: boolean;
|
||
|
|
size?: number;
|
||
|
|
shape?: 'circle' | 'square';
|
||
|
|
}>(),
|
||
|
|
{ size: 40, shape: 'circle' },
|
||
|
|
);
|
||
|
|
|
||
|
|
const { token } = theme.useToken();
|
||
|
|
const isLoading = useCrmSkeletonLoading(toRef(props, 'loading'));
|
||
|
|
|
||
|
|
const sizePx = computed(() => props.size ?? token.value.controlHeightLG ?? 40);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-skeleton-avatar
|
||
|
|
v-if="isLoading"
|
||
|
|
active
|
||
|
|
:size="sizePx"
|
||
|
|
:shape="shape"
|
||
|
|
/>
|
||
|
|
<slot v-else />
|
||
|
|
</template>
|