Kaynağa Gözat

可配置表格修复对齐方式

natasha 2 yıl önce
ebeveyn
işleme
addc43a2d7

+ 13 - 6
src/components/Adult/preview/ConfigurableTable.vue

@@ -72,7 +72,7 @@
               ]"
               :style="{ 'background-color': `${col.background}` }"
             >
-              <div class="cell-wrap">
+              <div class="cell-wrap" :class="[col.isCross?'cell-wrap-between':'','cell-wrap-'+curQue.textAlign]">
                 <template v-if="col.type === 'content'">
                   <span v-if="col.text.length > 0" class="content">
                     {{ col.text }}
@@ -747,8 +747,15 @@ export default {
         display: flex;
         align-items: center;
         column-gap: 4px;
-        justify-content: space-between;
-
+        &-center{
+            justify-content: center;
+        }
+        &-right{
+            justify-content: flex-end;
+        }
+        &-between{
+            justify-content: space-between;
+        }
         .content {
           width: 100%;
           font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
@@ -810,9 +817,9 @@ export default {
           display: grid;
         }
       }
-      .stem-content {
-        flex: 1;
-      }
+    //   .stem-content {
+    //     flex: 1;
+    //   }
       .number-box {
         // &-hasPY {
         //   margin-top: 19px;

+ 22 - 6
src/components/Adult/preview/HeaderSparate/index.vue

@@ -58,7 +58,7 @@
                 display: tdHeaderIsNone(i, j),
               }"
             >
-              <div class="cell-wrap">
+              <div class="cell-wrap" :class="[col.isCross?'cell-wrap-between':'','cell-wrap-'+curQue.textAlign]">
                 <template v-if="col.type === 'content'">
                   <span v-if="col.text.length > 0" class="content">
                     {{ col.text }}
@@ -77,6 +77,7 @@
                               curQue.Bookanswer[i].content[j].answer.trim())
                       "
                       type="textarea"
+                      :class="[`text-${curQue.textAlign}`]"
                       :placeholder="`${isAnswerMode ? '' : ''}`"
                       :disabled="isAnswerMode"
                       :autosize="{ minRows: 1, maxRows: 6 }"
@@ -714,11 +715,26 @@ export default {
       .cell-wrap {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-
+        &-center{
+            justify-content: center;
+        }
+        &-right{
+            justify-content: flex-end;
+        }
+        &-between{
+            justify-content: space-between;
+        }
         .content {
           font-family: "FZJCGFKTK", "GB-PINYINOK-B", "robot";
         }
+
+        @each $type in left, center, right {
+          .text-#{$type} {
+            ::v-deep .el-textarea__inner {
+              text-align: $type;
+            }
+          }
+        }
       }
 
       // 下划线
@@ -821,9 +837,9 @@ export default {
     }
   }
 }
-.stem-content {
-    flex: 1;
-}
+// .stem-content {
+//     flex: 1;
+// }
 .sent-main {
     position: relative;
     width: 100%;