xiangyuan-gov-app/src/components/display/skeleton/SkeletonImage.vue

<template>
  <BaseBox 
    v-bind="props"
    :inner-style="{
      ...themeStyles.skeletonImage.value,
      ...props.innerStyle,
    }"
  />
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import { DynamicSize } from '@/components/theme/ThemeTools';
import BaseBox, { type SleletonBaseBoxProps } from './SkeletonBaseBox.vue';

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  skeletonImage: {
    borderRadius: DynamicSize('SkeletonImageRadius', 10),
  },
});

/**
 * 图片占位组件
 */
export interface SkeletonImageProps extends SleletonBaseBoxProps {
}

const props = withDefaults(defineProps<SkeletonImageProps>(), {
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
</script>