123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <template>
- <div class="composition-element">
- <div class="composition-element-item" :style="styles" :id="data.id">
- <component :is="compName" :data="data"></component>
- </div>
- </div>
- </template>
- <script>
- import ElemText from "./ElemText";
- import ElemImage from "./ElemImage";
- import ElemLineHorizontal from "./ElemLineHorizontal";
- import ElemLineVertical from "./ElemLineVertical";
- export default {
- name: "composition-element",
- components: {
- ElemText,
- ElemImage,
- ElemLineHorizontal,
- ElemLineVertical
- },
- props: {
- data: {
- type: Object
- }
- },
- data() {
- return {};
- },
- computed: {
- compName() {
- return `elem-${this.data.type.toLowerCase().replace("_", "-")}`;
- },
- styles() {
- return {
- height: this.data.h + "px"
- };
- }
- }
- };
- </script>
|