teachcloud-print-web/card/modules/free/elements/fill-line/ElemFillLine.vue

<template>
  <div class="elem-fill-line">
    <div class="elem-body" v-if="data.questionDirection === 'vertical'">
      <ul
        class="elem-fill-quesiton"
        v-for="question in data.questionLineNums"
        :key="question.no"
        :style="groupStyles"
      >
        <li class="elem-fill-no">
          <span :style="lineNoStyles"
            >{{ data.numberPre }}{{ question.no }}.</span
          >
        </li>
        <li
          class="elem-fill-line"
          v-for="line in question.count"
          :key="line"
          :style="lineStyles"
        ></li>
      </ul>
    </div>
    <div v-else class="elem-body">
      <div v-for="question in data.questionLineNums" :key="question.no">
        <ul
          class="elem-fill-quesiton"
          v-for="line in question.count"
          :key="line"
          :style="groupStyles"
        >
          <li v-if="line === 1" class="elem-fill-no">
            <span :style="lineNoStyles">
              {{ data.numberPre }}{{ question.no }}.
            </span>
          </li>
          <li
            v-if="line !== question.count"
            class="elem-fill-comma"
            :style="lineNoStyles"
          >
            ,
          </li>
          <li class="elem-fill-line" :style="lineStyles"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-fill-line",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      questions: []
    };
  },
  computed: {
    lineStyles() {
      return {
        height: this.data.lineSpacing + "px"
      };
    },
    lineNoStyles() {
      return {
        top: this.data.lineSpacing - 4 + "px"
      };
    },
    groupStyles() {
      return {
        width: 100 / this.data.questionNumberPerLine + "%"
      };
    }
  },
  mounted() {},
  methods: {}
};
</script>