moduleBasic.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <component :is="getModuleComponent(position, version)" :style="style" :title="title">
  3. <slot></slot>
  4. </component>
  5. </template>
  6. <script lang="ts" setup>
  7. import ModuleLeft from './moduleLeft.vue';
  8. import ModuleRight from './moduleRight.vue';
  9. import ModuleBottom from './moduleBottom.vue';
  10. import { computed } from 'vue';
  11. const props = withDefaults(
  12. defineProps<{
  13. title?: string;
  14. position?: string;
  15. size?: string;
  16. version?: string;
  17. }>(),
  18. {
  19. title: '',
  20. position: '',
  21. version: '',
  22. size: '',
  23. }
  24. );
  25. const style = computed(() => {
  26. return props.size + props.position;
  27. });
  28. // 根据配置里的定位判断应该使用哪个module组件
  29. function getModuleComponent(position, version) {
  30. if (version === 'original') {
  31. return ModuleLeft; // TODO:改为返回旧版的module组件
  32. }
  33. if (position.includes('left:0')) {
  34. return ModuleLeft;
  35. }
  36. if (position.includes('right:0')) {
  37. return ModuleRight;
  38. }
  39. if (position.includes('bottom:0')) {
  40. return ModuleBottom;
  41. }
  42. return ModuleLeft; // TODO:改为返回旧版的module组件
  43. }
  44. </script>