CompositionElement.vue 832 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <div class="composition-element">
  3. <div class="composition-element-item" :style="styles" :id="data.id">
  4. <component :is="compName" :data="data"></component>
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. import ElemText from "./ElemText";
  10. import ElemImage from "./ElemImage";
  11. import ElemLineHorizontal from "./ElemLineHorizontal";
  12. import ElemLineVertical from "./ElemLineVertical";
  13. export default {
  14. name: "composition-element",
  15. components: {
  16. ElemText,
  17. ElemImage,
  18. ElemLineHorizontal,
  19. ElemLineVertical
  20. },
  21. props: {
  22. data: {
  23. type: Object
  24. }
  25. },
  26. data() {
  27. return {};
  28. },
  29. computed: {
  30. compName() {
  31. return `elem-${this.data.type.toLowerCase().replace("_", "-")}`;
  32. },
  33. styles() {
  34. return {
  35. height: this.data.h + "px"
  36. };
  37. }
  38. }
  39. };
  40. </script>