xiangyuan-app/src/components/display/skeleton/SkeletonButton.vue

<template>
  <BaseBox 
    v-bind="props"
    :inner-style="{
      ...selectStyleType(props.size, 'medium', {
        small: themeStyles.skeletonButtonSm.value,
        medium: themeStyles.skeletonButtonMd.value,
        large: themeStyles.skeletonButtonLg.value,
      }),
      ...themeStyles.skeletonButton.value,
      ...props.innerStyle,
    }"
  />
</template>

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

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  skeletonButton: {
    borderRadius: DynamicSize('SkeletonButtonRadius', 10),
  },
  skeletonButtonSm: {
    width: DynamicSize('SkeletonButtonWidth', 60),
    height: DynamicSize('SkeletonButtonHeight', 42),
  },
  skeletonButtonMd: {
    width: DynamicSize('SkeletonButtonWidth', 155),
    height: DynamicSize('SkeletonButtonHeight', 82),
  },
  skeletonButtonLg: {
    width: DynamicSize('SkeletonButtonWidth', 180),
    height: DynamicSize('SkeletonButtonHeight', 100),
  },
});

/**
 * 标题占位组件
 */
export interface SkeletonButtonProps extends SleletonBaseBoxProps {
  /**
   * 大小预设
   * @default 'medium'
   */
  size?: SkeletonItemSize,
}

const props = withDefaults(defineProps<SkeletonButtonProps>(), {
  size: 'medium',
});

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