layout-content.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <script setup lang="ts">
  2. import type { ContentCompactType } from '@vben-core/typings';
  3. import type { CSSProperties } from 'vue';
  4. import { computed } from 'vue';
  5. import { useContentStyle } from '@vben-core/composables';
  6. import { Slot } from '@vben-core/shadcn-ui';
  7. interface Props {
  8. /**
  9. * 内容区域定宽
  10. */
  11. contentCompact: ContentCompactType;
  12. /**
  13. * 定宽布局宽度
  14. */
  15. contentCompactWidth: number;
  16. padding: number;
  17. paddingBottom: number;
  18. paddingLeft: number;
  19. paddingRight: number;
  20. paddingTop: number;
  21. }
  22. const props = withDefaults(defineProps<Props>(), {});
  23. const { contentElement, overlayStyle } = useContentStyle();
  24. const style = computed((): CSSProperties => {
  25. const {
  26. contentCompact,
  27. padding,
  28. paddingBottom,
  29. paddingLeft,
  30. paddingRight,
  31. paddingTop,
  32. } = props;
  33. const compactStyle: CSSProperties =
  34. contentCompact === 'compact'
  35. ? { margin: '0 auto', width: `${props.contentCompactWidth}px` }
  36. : {};
  37. return {
  38. ...compactStyle,
  39. flex: 1,
  40. padding: `${padding}px`,
  41. paddingBottom: `${paddingBottom}px`,
  42. paddingLeft: `${paddingLeft}px`,
  43. paddingRight: `${paddingRight}px`,
  44. paddingTop: `${paddingTop}px`,
  45. };
  46. });
  47. </script>
  48. <template>
  49. <main ref="contentElement" :style="style" class="bg-background-deep relative">
  50. <Slot :style="overlayStyle">
  51. <slot name="overlay"></slot>
  52. </Slot>
  53. <slot></slot>
  54. </main>
  55. </template>