Width.vue 731 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <div class="nana-space" :style="{ width: resolveThemeSize(size ?? width) }">
  3. <slot />
  4. </div>
  5. </template>
  6. <script setup lang="ts">
  7. import { useTheme } from '@/components/theme/ThemeDefine';
  8. defineProps({
  9. /**
  10. * 宽度
  11. */
  12. size: {
  13. type: [ Number, String ],
  14. default: undefined,
  15. },
  16. width: {
  17. type: [ Number, String ],
  18. default: undefined,
  19. },
  20. })
  21. const { resolveThemeSize } = useTheme();
  22. defineOptions({
  23. options: {
  24. inheritAttrs: false,
  25. virtualHost: true,
  26. }
  27. })
  28. </script>
  29. <script lang="ts">
  30. /**
  31. * 组件说明:宽度占位组件,可以用于各种布局中,用于提供占位宽度。
  32. */
  33. export default {}
  34. </script>
  35. <style>
  36. .nana-space {
  37. flex-shrink: 0;
  38. }
  39. </style>