表格输入文字大小和高度

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -87,7 +87,9 @@
                                     'align-items': getWordAlignItems(word, item),
                                   }"
                                 >
-                                  <span class="pinyin" :style="getPinyinStyle(word)"> {{ word.pinyin }}</span>
+                                  <span class="pinyin" :style="getPinyinStyle(word)">
+                                    {{ word.pinyin.trim() ? word.pinyin : '&nbsp;' }}</span
+                                  >
                                   <span class="py-char" :style="getCharStyle(word, item)">{{
                                     convertText(word.text)
                                   }}</span>
@@ -101,7 +103,7 @@
                                     v-model="word.value"
                                     :disabled="disabled"
                                     :class="[...computedAnswerClass(word, i, j)]"
-                                    :style="[{ width: Math.max(40, word.value.length * 21.3) + 'px' }]"
+                                    :style="getInputStyle(item.styleObj, word)"
                                   />
                                 </template>
                                 <template v-else-if="data.property.fill_type === fillTypeList[1].value">
@@ -122,7 +124,7 @@
                                       v-model="word.value"
                                       :readonly="true"
                                       :class="[...computedAnswerClass(word, i, j)]"
-                                      :style="[{ width: Math.max(40, word.value.length * 21.3) + 'px' }]"
+                                      :style="getInputStyle(item.styleObj, word)"
                                     />
                                   </el-popover>
                                 </template>
@@ -238,7 +240,17 @@
                               v-model="item.value"
                               :disabled="disabled"
                               :class="[...computedAnswerClass(item, i, j)]"
-                              :style="[{ width: Math.max(40, item.value.length * 21.3) + 'px' }]"
+                              :style="[
+                                {
+                                  width: Math.max(40, item.value.length * 21.3) + 'px',
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                  fontFamily:
+                                    data.unified_attrib && data.unified_attrib.font ? data.unified_attrib.font : '',
+                                },
+                              ]"
                             />
                           </template>
                           <template v-else-if="data.property.fill_type === fillTypeList[1].value">
@@ -425,7 +437,9 @@
                                       'align-items': getWordAlignItems(word, item),
                                     }"
                                   >
-                                    <span class="pinyin" :style="getPinyinStyle(word)"> {{ word.pinyin }}</span>
+                                    <span class="pinyin" :style="getPinyinStyle(word)">{{
+                                      word.pinyin.trim() ? word.pinyin : '&nbsp;'
+                                    }}</span>
                                     <span class="py-char" :style="getCharStyle(word, item)">{{
                                       convertText(word.text)
                                     }}</span>
@@ -948,6 +962,16 @@ export default {
 
       return baseStyle;
     },
+    // input的高度
+    getInputStyle(styles, words) {
+      const baseStyle = {};
+      baseStyle['font-size'] = styles ? styles.fontSize : '16px';
+      baseStyle['--input-font-family'] = styles ? styles.fontFamily : '';
+      baseStyle['width'] = Math.max(40, words.value.length * 21.3) + 'px';
+      baseStyle['height'] = styles && styles.fontSize ? styles.fontSize.replace('pt', '') * 1.5 + 'pt' : '24px';
+
+      return baseStyle;
+    },
     // 如果汉字有字间距，拼音与汉字左对齐，如果没有则居中对齐
     getWordAlignItems(word, block) {
       const letterSpacing = block.styleObj?.letterSpacing;
@@ -1441,6 +1465,7 @@ $border-color: #e6e6e6;
 
         :deep input.el-input__inner {
           padding: 0;
+          font-family: var(--input-font-family);
 
           // font-size: 16pt;
           color: $font-color;