<template> <div ref="myBody" class="add-question flex"> <div class="text flex"> <div class="left"> 目前录入题目是第<span>{{ questionNextNum }}</span >道题 </div> <div> <el-radio-group v-model="form.topicType" size="mini" @input="topicTypeChange" > <el-radio-button :label="1">单选</el-radio-button> <el-radio-button :label="2">多选</el-radio-button> <el-radio-button :label="3">判断</el-radio-button> </el-radio-group> </div> </div> <el-form class="form flex" ref="form" :model="form" label-width="auto"> <!-- <div class="top flex"> --> <div> <el-form-item label="题目" prop="topicTitle" :rules="{ required: true, message: '必须输入题目内容', trigger: 'blur', }" > <el-input type="textarea" placeholder="多行输入" resize="none" rows="4" v-model="form.topicTitle" > </el-input> </el-form-item> </div> <div class="bottom"> <!-- <el-form-item label="选项1" prop="title"> <el-input v-model="form.title" placeholder="请输入"></el-input> </el-form-item> --> <el-form-item v-for="(question, index) in form.questions" :label="'选项' + (index + 1)" :key="question.key" :prop="'questions.' + index + '.value'" :rules="{ required: true, message: '第一项不能为空不能为空', trigger: 'blur', }" > <div class="add-select flex"> <el-input type="textarea" placeholder="多行输入" style="flex: 1; margin-right: 10px" rows="2" v-model="question.value" ></el-input> <div class="flex algin-items"> <el-button @click="rightAnswerClick(index)" class="right" :class="{ active: answerNum.indexOf(index) >= 0, }" icon="el-icon-check" > 设为答案 </el-button> <el-button size="mini" type="danger" v-if="index > 0 && form.topicType != 3" @click.prevent="removeDomain(question)" plain icon="el-icon-delete" >删除</el-button > </div> </div> </el-form-item> <!-- <el-form-item class="noAttr" :label="`选项${form.questions.length + 1}`" prop="" > <div class="add-select flex"> <el-input type="textarea" placeholder="多行输入" resize="none" rows="2" v-model="addValue" style="flex: 1; margin-right: 10px" > </el-input> <div class="flex algin-items"> <el-button @click="rightAnswerClick(form.questions.length)" class="right" :class="{ active: answerNum === form.questions.length }" icon="el-icon-check" > 设为答案 </el-button> <el-button size="mini" class="right1" @click.prevent="add(addValue)" icon="el-icon-plus" >新增</el-button > </div> </div> </el-form-item> --> <div style="padding-left: 55px" v-if="form.topicType != 3"> <el-button size="mini" style="background: #0bab0c; color: #fff; border: 1px solid #0bab0c" @click.prevent="add(addValue)" >新增选项</el-button > </div> </div> </el-form> </div> </template> <script> export default { name: "AnswerLesson", data() { return { form: { topicType: 1, topicTitle: "", questions: [{ value: "" }, { value: "" }], }, answerNum: [], addValue: "", // 录入的是第几道题 questionNextNum: 1, courseName: "", }; }, created() {}, methods: { topicTypeChange(num) { if (num == 1) { this.answerNum = []; } else if (num == 2) { this.answerNum = []; // this.form.questions=[{ value: "" }, { value: "" }]; } else { this.answerNum = []; const form = { topicType: 3, topicTitle: this.form.topicTitle, questions: [{ value: "对" }, { value: "错" }], }; this.form = form; } }, //设置正确答案 // rightAnswerClick(index) { // this.answerNum = index; // }, rightAnswerClick(index) { if (this.form.topicType === 2) { const ind = this.answerNum.indexOf(index); if (ind < 0) { this.answerNum.push(index); } else { this.answerNum.splice(ind, 1); } this.answerNum = this.answerNum.sort((a, b) => { return a - b; }); console.log(this.answerNum); } else { // 判断跟单选模式差不多 this.answerNum = [index]; } }, // 删除选项 // removeDomain(question) { // const index = this.form.questions.indexOf(question); // // 如果是正确答案,就让正确答案清空 // if (this.answerNum === index) { // this.answerNum = null; // } // if (index >= 0) { // this.form.questions.splice(index, 1); // } // }, removeDomain(question) { const index = this.form.questions.indexOf(question); console.log(index); // 如果是正确答案,就让正确答案清空 const ind = this.answerNum.indexOf(index); if (ind >= 0) { this.answerNum.splice(ind, 1); } // 如果是最后一位呗删除,那不用管,如果不是最后一位置,这一位删除之后,则这一位后面的所有数字都要-1; if (index != this.form.questions.length - 1) { this.answerNum = this.answerNum.map((item, i) => { if (item >= index) { return item - 1; } else { return item; } }); } if (index >= 0) { this.form.questions.splice(index, 1); } console.log(this.answerNum); // console.log(this.form.questions) }, // 新增选项 add(addValue) { this.form.questions.push({ value: addValue }); }, reset() { this.form = { topicTitle: "", questions: [{ value: "" }, { value: "" }], }; this.answerNum = null; this.addValue = ""; }, }, }; </script> <style lang="scss" scoped> .add-question { width: 100%; height: 250px; // overflow: hidden; flex-direction: column; padding-bottom: 7px; margin-bottom: 20px; border-bottom: 1px solid #bbbbbb; justify-content: space-between; .form { flex: 1; flex-direction: column; height: 100%; .bottom { overflow-y: auto; height: 330px; box-sizing: border-box; .algin-items { align-items: center; width: 200px; } .right { display: inline-block; width: 133px; margin-right: 10px; line-height: initial; padding: 4px 0; border: 1px solid #0bab0c; color: #0bab0c; font-size: 12px; text-align: center; border-radius: 4px; box-sizing: border-box; cursor: pointer; &.active { background-color: #0bab0c; color: #ffffff; } &:hover { background-color: rgba(11, 171, 12, 0.5); color: #ffffff; } } .right1 { display: inline-block; margin-right: 10px; line-height: initial; width: 90px; border: 1px solid #0bab0c; color: #0bab0c; font-size: 12px; padding: 4px 0; text-align: center; border-radius: 4px; box-sizing: border-box; cursor: pointer; &.active { background-color: #0bab0c; color: #ffffff; } &:hover { background-color: rgba(11, 171, 12, 0.5); color: #ffffff; } } } } .text { margin-top: 13px; margin-bottom: 34px; justify-content: space-between; height: 28px; .left { line-height: 28px; color: #101010; font-size: 14px; } .right { width: 411px; line-height: 28px; background: #1d84ff; padding-right: 5px; color: #fff; text-align: right; } } } </style>