union-question-web/src/modules/card/elements/text/ElemText.vue

<template>
  <div class="elem-text" :style="elemStyles">
    <div class="text-body" :style="styles">
      <span
        v-for="(cont, index) in data.content"
        :key="index"
        :class="`cont-${cont.type}`"
        >{{ cont.content }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "ElemText",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    styles() {
      return {
        fontWeight: this.data.fontWeight,
        fontFamily: this.data.fontFamily,
        fontSize: this.data.fontSize,
        color: this.data.color,
      };
    },
    elemStyles() {
      if (this.data.mode === "side") {
        return {
          position: "absolute",
          width: this.data.h + "px",
          height: this.data.w + "px",
          transform: "rotate(-90deg)",
          "transform-origin": "0 100%",
          bottom: 0,
          left: this.data.w + "px",
        };
      } else {
        return null;
      }
    },
  },
  methods: {},
};
</script>