限制文本域输入字符

src/components/exam/question.vue

@@ -39,7 +39,7 @@
       <div class="title">
         <div class="num">{{ questionData.q_order }}.</div><div class="des" v-html="questionData.content"></div>
       </div>
-      <el-input @input="QAChange(questionData.question_item_id, questionData.id)" type="textarea" placeholder="请输入内容" v-model="questionData.textContent"></el-input>
+      <el-input @input="QAChange(questionData.question_item_id, questionData.id, questionData.textContent)" type="textarea" placeholder="请输入内容" v-model="questionData.textContent"></el-input>
     </template>
     <!-- 复合题 -->
     <template v-if="questionData.question_item_type == 5 || questionData.question_item_type == 7 || questionData.question_item_type == 8">
@@ -58,7 +58,7 @@
                 <div class="num">{{ item.q_order }}.</div><div class="des" v-html="item.content"></div>
               </div>
               <div v-if="item.type == 3" @click="changeIndex(item.q_order)">
-                <el-input @input="QAChildChange(questionData.question_item_id, item)" type="textarea" placeholder="请输入内容" v-model="item.answer"></el-input>
+                <el-input @input="QAChildChange(questionData.question_item_id, item, item.answer)" type="textarea" placeholder="请输入内容" v-model="item.answer"></el-input>
               </div>
               <!-- <el-input @input="QAChange(questionData.question_item_id, questionData.id)" type="textarea" placeholder="请输入内容" v-model="questionData.textContent"></el-input> -->
               <ul v-else :class="item.type == 2 ? 'check-option' : 'radio-option'"><!-- radio-option check-option -->
@@ -183,7 +183,8 @@ export default {
       })
     },
     // 案例题下面的问答题
-    QAChildChange(pId, item) {
+    QAChildChange(pId, item, length) {
+      if (length.length < 500) {
         if (this.questionParams.answerRecord[pId]) {
           if (this.questionParams.answerRecord[pId][item.id]) {
             this.questionParams.answerRecord[pId][item.id].answer = [item.answer]
@@ -202,9 +203,16 @@ export default {
           }
         }
         this.$forceUpdate()
+      } else {
+        this.$message({
+          message: '最多输入500个字符',
+          type: 'warning'
+        })
+      }
     },
     // 问答题回答
-    QAChange(pId, cId) {
+    QAChange(pId, cId, length) {
+      if (length < 500) {
         this.questionParams.answerRecord[pId]
           ? this.questionParams.answerRecord[pId][cId]
             ? this.questionParams.answerRecord[pId][cId].answer = [this.questionData.textContent]
@@ -219,6 +227,12 @@ export default {
             }
           }
         this.$forceUpdate()
+      } else {
+        this.$message({
+          message: '最多输入500个字符',
+          type: 'warning'
+        })
+      }
     },
     changeIndex(order) {
       this.questionParams.questionIndex = order - 1