input修改

src/components/pages/test/examine/conpoments/personPage.vue

@@ -209,7 +209,7 @@
                       </div>
                       <div style="display: flex;justify-content: center;">
                         <div v-if="tableData.length > 0" class="ScoreStep">
-                          <input
+                          <el-input
                             :style="{
                               color: k.sco1 == k.sco2 ? '#000' : 'red'
                             }"
@@ -223,10 +223,9 @@
                                   : ''
                               )
                             "
-                            type="number"
-                            v-model="k.sco2"
-                            @wheel.prevent="handleWheel"
-                          />
+                            v-model.number="k.sco2"
+                            v-stopMousewheel
+                          ></el-input>
                         </div>
                       </div>
                       <div style="display: flex;justify-content: center;">
@@ -344,6 +343,16 @@
 <script>
 import shareBox from "./shareBox/index";
 export default {
+  directives: {
+    stopMousewheel: {
+      inserted: function(el) {
+        const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');
+        ele.addEventListener("mousewheel", () => {
+          ele.blur();
+        });
+      }
+    }
+  },
   props: {
     pType: {
       //2专任教师 1班主任
@@ -1099,6 +1108,7 @@ export default {
 .ScoreStep >>> .el-input__inner {
   height: 100%;
   padding-left: 15px;
+  border: none;
   padding-right: 15px;
 }
 .testPersonExamine {

src/components/pages/test/examine/conpoments/targetPage.vue

@@ -236,25 +236,23 @@
           >
             <template slot-scope="scope">
               <div class="ScoreStep">
-                <input
-                  type="number"
+                <el-input
                   v-if="scope.row.judge == 1"
                   style=" color
                 :#A7AAB2;"
                   @blur="Submit(scope.row)"
-                  v-model="scope.row.cogSco"
-                  @wheel.prevent="handleWheel"
-                />
-                <input
-                  type="number"
+                  v-model.number="scope.row.cogSco"
+                  v-stopMousewheel
+                ></el-input>
+                <el-input
                   v-else
                   :style="{
                     color: scope.row.cogSco == scope.row.evaSca ? '#000' : 'red'
                   }"
                   @blur="Submit(scope.row)"
-                  v-model="scope.row.cogSco"
-                  @wheel.prevent="handleWheel"
-                />
+                  v-model.number="scope.row.cogSco"
+                  v-stopMousewheel
+                ></el-input>
               </div>
             </template>
           </el-table-column>
@@ -279,7 +277,18 @@
 </template>
 
 <script>
+// import Vue from 'vue';
 export default {
+  directives: {
+    stopMousewheel: {
+      inserted: function(el) {
+        const ele = el.tagName === "INPUT" ? el : el.querySelector("input");
+        ele.addEventListener("mousewheel", () => {
+          ele.blur();
+        });
+      }
+    }
+  },
   props: {
     pType: {
       //2专任教师 1班主任

src/components/pages/testPerson/examine/index.vue

@@ -68,9 +68,8 @@
                   <div>{{ k.score }}</div>
                   <div>
                     <div v-if="k.type == 1" class="ScoreStep">
-                      <input
+                      <el-input
                         v-if="allData.type * 1 != 2"
-                        type="number"
                         @blur="
                           saveTab(
                             k.sco1 > k.score
@@ -80,9 +79,9 @@
                               : ''
                           )
                         "
-                        v-model="k.sco1"
-                        @wheel.prevent="handleWheel"
-                      />
+                        v-model.number="k.sco1"
+                        v-stopMousewheel
+                      ></el-input>
                       <div v-else>{{ k.sco1 }}</div>
                     </div>
                     <div v-else class="ScoreStep">/</div>
@@ -179,6 +178,16 @@
 
 <script>
 export default {
+  directives: {
+    stopMousewheel: {
+      inserted: function(el) {
+        const ele = el.tagName === "INPUT" ? el : el.querySelector("input");
+        ele.addEventListener("mousewheel", () => {
+          ele.blur();
+        });
+      }
+    }
+  },
   data() {
     return {
       pType: 2,
@@ -748,6 +757,18 @@ input[type="number"] {
 /* .twoCon > div >>> .el-input {
   height: 100% !important;
 } */
+.ScoreStep >>> .el-input-number {
+  height: 100% !important;
+}
+.ScoreStep >>> .el-input {
+  height: 100% !important;
+}
+.ScoreStep >>> .el-input__inner {
+  height: 100%;
+  padding-left: 15px;
+  border: none;
+  padding-right: 15px;
+}
 .twoCon > div > input {
   border: none;
   width: 100%;