完型填空

src/components/questiontype/v-cloze.vue

 <!--完型填空-->
 <style>
-  .clozeQuestion {
+  .vClozeQuestion {
     width: 100%;
   }
 
-  .clozeQuestion .question_Title {
+  .vClozeQuestion .question_Title {
     color: #A8A8B3;
     font-size: 12px;
     margin-top: 20px;
   }
 
-  .clozeQuestion .clozeTest_question_tit {
+  .vClozeQuestion .clozeTest_question_tit {
     width: 100%;
     height: 40px;
     background: #F7F8FA;
@@ -23,52 +23,28 @@
     align-items: center;
   }
 
-  .clozeQuestion .clozeTest_question_tit i {
+  .vClozeQuestion .clozeTest_question_tit i {
     color: #acbfd9;
     cursor: pointer;
-  }
-
-  .clozeQuestion .add_LiteBtn {
-    width: 100px;
-    height: 30px;
-    display: inline-block;
-    box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.30);
-    color: #FFFFFF;
-    text-align: center;
-    line-height: 30px;
-    border-radius: 20px;
-    cursor: pointer;
-    background-color: #2961fe;
-    margin-bottom: 20px;
-  }
-
-  .clozeQuestion .add_LiteBtn:hover {
-    opacity: 0.8;
-  }
+  }  
 
 </style>
 <template>
-  <div class="clozeQuestion">
-    <div class="question_Title">小题数：{{data.length}}</div>
+  <div class="vClozeQuestion">
     <template v-if="data&&data.length>0" v-for="(item,index) in data">
       <table class="common_TiTable">
         <thead>
           <tr>
-            <th colspan="3">
-              <div class="clozeTest_question_tit" @click="showNav(index)">
+            <th colspan="2">
+              <div class="clozeTest_question_tit">
                 <div>
-                  <i class="iconfont icon-arrowdown2" v-if="(commonIndex==index)&&!isShow"></i>
-                  <i class="iconfont icon-arrowright" v-else></i>
                   第{{index+1}}小题
                 </div>
-                <div>
-                  <i class="iconfont icon-img_delete_small" @click.stop="deleteQuestion(index)"></i>
-                </div>
               </div>
             </th>
           </tr>
         </thead>
-        <tbody class="contant" v-if="(commonIndex==index)&&!isShow">
+        <tbody class="contant">
           <tr v-for="(subItem,subIndex) in item">
             <td style="width:40px;text-align:center;">
               <div class="Answer_List" :class="{'Is_Answer':subItem.IsAnswer}">
@@ -79,8 +55,6 @@
               <div class="InpDIV" style="border:0;" v-html="subItem.Content">
               </div>
             </td>
-            <td style="width:40px;text-align:center;">
-            </td>
           </tr>
         </tbody>
       </table>
@@ -88,11 +62,6 @@
   </div>
 </template>
 <script>
-  import {
-    getOptionList, //获取选择标签【A,B,C,D....】
-    optionListConfig,
-  } from '../../api/question/questionconfig'
-  import UeEditor from '../editor/UeEditor'
   export default {
     props: {
       questionData: {
@@ -103,103 +72,17 @@
       }
     },
     components: {
-      UeEditor
+
     },
     data() {
       return {
         data: this.questionData,
-        config: {
-          initialFrameWidth: null,
-          initialFrameHeight: 80,
-        },
-        optionTitleList: [],
-        showTag: true,
-        commonIndex: -1,
-        childIndex: -1,
-        isShow: true,
-        commonIndex2: -2,
       };
     },
     created() {
-      this.initConfig();
+
     },
     methods: {
-      initConfig() {
-        this.optionTitleList = getOptionList();
-      },
-      //删除小问题
-      deleteQuestion(index) {
-        this.$q.dialog({
-          title: "删除小题",
-          message: "确实要删除该小题吗？",
-          persistent: true,
-          cancel: {
-            label: "取消",
-            flat: true
-          },
-          ok: {
-            label: "确认",
-            flat: true,
-            focus: true
-          }
-        }).onOk(() => {
-          this.data.splice(index, 1);
-        });
-      },
-      //删除选项
-      deleteOpion(item, index) {
-        this.$q.dialog({
-          title: "删除小题",
-          message: "确实要删除该选项吗？",
-          persistent: true,
-          cancel: {
-            label: "取消",
-            flat: true
-          },
-          ok: {
-            label: "确认",
-            flat: true,
-            focus: true
-          }
-        }).onOk(() => {
-          item.splice(index, 1);
-          this.childIndex = -1;
-          this.calcOptionTitle();
-        });
-      },
-      //新增选项
-      addOption(item) {
-        if (item.length < 7) {
-          item.push({
-            Name: "",
-            Content: "",
-            IsAnswer: false
-          });
-          this.calcOptionTitle()
-        } else {
-          this.$q.notify({
-            type: 'warning',
-            position: 'center',
-            timeout: 1500,
-            message: `最多只能添加7个选项`
-          })
-          return
-        }
-      },
-      //添加小题
-      addQuestion() {
-        this.data.push(optionListConfig());
-      },
-      //重新计算选择Title[A,B,C,D....]
-      calcOptionTitle() {
-        if (this.data && this.data.length > 0) {
-          this.data.forEach((item, index) => {
-            item.forEach((subItem, subIndex) => {
-              subItem.Name = this.optionTitleList[subIndex];
-            })
-          })
-        }
-      },
       //返回数据到父组件
       returnDataToParent() {
         this.getAnswer();
@@ -223,17 +106,6 @@
           this.setOption.Answer = answer;
         }
       },
-      //点击展开收起
-      showNav(index) {
-        if (this.commonIndex2 == index) {
-          this.commonIndex = index;
-          this.isShow = !this.isShow;
-        } else {
-          this.commonIndex = index;
-          this.isShow = false;
-          this.commonIndex2 = index;
-        }
-      },
     },
     mounted() {