<template> <div class="elem-fill-line"> <div v-if="data.parent && data.startNumber === data.parent.startNumber" class="elem-title" :style="nameStyles" > {{ data.parent.topicName }} </div> <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"> <ul class="elem-fill-quesiton" v-for="line in data.questionLineNums[0].count" :key="line" :style="groupStyles" > <li v-if="line === 1" class="elem-fill-no"> <span :style="lineNoStyles"> {{ data.numberPre }}{{ data.questionLineNums[0].no }}. </span> </li> <li v-if="line !== data.questionLineNums[0].count" class="elem-fill-comma" :style="lineNoStyles" > , </li> <li class="elem-fill-line" :style="lineStyles"></li> </ul> </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 + "%", }; }, nameStyles() { return { fontWeight: this.data.parent.nameFontWeight, fontSize: this.data.parent.nameFontSize, }; }, }, mounted() {}, methods: {}, }; </script>