多列填写组件优化

src/common/MultiLineInput.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="multipIpt">
     <span class="prefix" v-if="content.prefix">{{content.prefix}}</span>
-    <div class="sticP">
-        <input class="contentVal" :type="content.type" :placeholder="content.placeholder" v-model="val" @input="changeVal">
+    <div class="sticP" :style="{paddingRight:content.suffix?'1rem':'0'}">
+        <div class="iptWrap">
+          <input class="contentVal" :type="content.type" :placeholder="content.placeholder" v-model="val" @input="changeVal">
+        </div>
     </div>
     <span class="suffix" v-if="content.suffix">{{content.suffix}}</span>
   </div>
@@ -53,7 +55,10 @@ export default {
       border-radius: 0;
       background-color: #fff;
       outline-color: invert;
-      padding-left: 0.1rem;
+      height: .36rem;
+      line-height: .36rem;
+      width: 100%;
+      // padding-left: 0.1rem;
       box-sizing: border-box;
     }
   }
@@ -69,8 +74,13 @@ export default {
   }
   .sticP {
     width: 100%;
-    position: relative;
+    // position: relative;
     padding-right: 1rem;
     box-sizing: border-box;
+    .iptWrap {
+      // width: 100%;
+      position: relative;
+      overflow: hidden;
+    }
   }
 </style>

src/utils/tools.js

@@ -17,7 +17,6 @@ const deepClone = (arr) =>{
 }
 
 const getModelExpStr = (str) =>{
-  // str = '${number_}'
   let matchStr = str.match(/\${number_(.*})/)[0]
   let result = {}
   if(matchStr){//数字输入框