update

src/components/pages/test/add/components/choice/index.vue

@@ -1,252 +1,292 @@
 <template>
-    <div class="choice_box jiao" @click.stop="">
-        <!-- <div class="title">设置选择题</div> -->
-        <div class="box">
-            <!-- <div class="set_type" style="margin-top: 0;">
+  <div class="choice_box jiao" @click.stop="">
+    <!-- <div class = "title">设置选择题</div> -->
+    <div class="box">
+      <!-- <div class = "set_type" style              = "margin-top: 0;">
                 <span>题目类型：</span>
                 <el-select v-model="checkJson.type" @change="changeAnswer">
                     <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                     </el-option>
                 </el-select>
             </div> -->
-            <div class="set_title" style="align-items: flex-start;">
-                <span>表单问题：</span><textarea v-autoHeight="68" rows="2" class="binfo_input binfo_textarea" cols v-model="checkJson.title"
-                    placeholder="请输入标题"></textarea>
-                    <!-- <el-input v-model="checkJson.title" class="input" placeholder="请输入标题"></el-input> -->
+      <div class="set_title" style="align-items: flex-start;">
+        <span>表单问题：</span
+        ><textarea
+          v-autoHeight="68"
+          rows="2"
+          class="binfo_input binfo_textarea"
+          cols
+          v-model="checkJson.title"
+          placeholder="请输入标题"
+        ></textarea>
+        <!-- <el-input v-model="checkJson.title" class="input" placeholder="请输入标题"></el-input> -->
+      </div>
+      <div class="set_title">
+        <span>题目分数：</span
+        ><el-input
+          v-model="checkJson.score"
+          class="input"
+          placeholder="请输入分数"
+          style="width: 120px"
+          @change="numberPan"
+        ></el-input>
+      </div>
+      <div class="set_options">
+        <div class="title">选项内容：</div>
+        <div class="xuan_body">
+          <div class="xuan_title">
+            <span class="xuan_1">选项文字</span>
+            <!-- <span class="xuan_2">图片</span> -->
+            <span class="xuan_3">正确答案</span>
+            <!-- <span class="xuan_4">上移下移</span> -->
+          </div>
+          <div
+            v-for="(item, index) in checkJson.array"
+            :key="index"
+            class="xuan_box"
+          >
+            <div class="xuan_1">
+              <el-input
+                v-model="item.option"
+                placeholder="请输入选项"
+                size="normal"
+              ></el-input>
+              <el-button
+                type="primary"
+                size="mini"
+                @click="addOption2(index)"
+                style="margin-left: 10px;"
+                >+</el-button
+              >
+              <el-button type="primary" size="mini" @click="deleteOption(index)"
+                >-</el-button
+              >
             </div>
-            <div class="set_title">
-                <span>题目分数：</span><el-input v-model="checkJson.score" class="input" placeholder="请输入分数" style="width: 120px" @change="numberPan"></el-input>
+            <!-- <div class="xuan_2"><span></span></div> -->
+            <div class="xuan_3">
+              <el-checkbox
+                v-model="checkJson.answer"
+                :label="index"
+                @change="checkChange(index)"
+              ></el-checkbox>
             </div>
-            <div class="set_options">
-                <div class="title">选项内容：</div>
-                <div class="xuan_body">
-                    <div class="xuan_title">
-                        <span class="xuan_1">选项文字</span>
-                        <!-- <span class="xuan_2">图片</span> -->
-                        <span class="xuan_3">正确答案</span>
-                        <!-- <span class="xuan_4">上移下移</span> -->
-                    </div>
-                    <div v-for="(item, index) in checkJson.array" :key="index" class="xuan_box">
-                        <div class="xuan_1">
-                            <el-input v-model="item.option" placeholder="请输入选项" size="normal"></el-input>
-                            <el-button type="primary" size="mini" @click="addOption2(index)"
-                                style="margin-left: 10px;">+</el-button>
-                            <el-button type="primary" size="mini" @click="deleteOption(index)">-</el-button>
-                        </div>
-                        <!-- <div class="xuan_2"><span></span></div> -->
-                        <div class="xuan_3"><el-checkbox v-model="checkJson.answer" :label="index"
-                                @change="checkChange(index)"></el-checkbox></div>
-                        <!-- <div class="xuan_4">
+            <!-- <div class="xuan_4">
                             <div><span></span><span></span></div>
                         </div> -->
-                    </div>
-                </div>
-                <div class="btn">
-                    <el-button type="primary" size="mini" @click="addOption">添加选项</el-button>
-                </div>
-            </div>
+          </div>
+        </div>
+        <div class="btn">
+          <el-button type="primary" size="mini" @click="addOption"
+            >添加选项</el-button
+          >
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: {
-        cJson: {
-            type: Object,
-        },
-    },
-    data() {
-        return {
-            ctype: 1,
-            options: [
-                { type: 1, name: '单选题' },
-                { type: 2, name: '多选题' }
-            ],
-            checkJson: {}
+  props: {
+    cJson: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      ctype: 1,
+      options: [
+        { type: 1, name: "单选题" },
+        { type: 2, name: "多选题" }
+      ],
+      checkJson: {}
+    };
+  },
+  directives: {
+    autoHeight: {
+      update(el, binding) {
+        const { value } = binding;
+        if (value && typeof value === "number") {
+          el.style.height = `${value}px`;
+        } else {
+          el.style.height = "auto";
         }
+      },
+      componentUpdated(el) {
+        el.style.height = `${el.scrollHeight + 5}px`;
+      }
+    }
+  },
+  watch: {
+    checkJson: {
+      handler(newVal) {
+        this.$emit("setJson", newVal);
+        console.log("checkW", this.cJson);
+      },
+      deep: true
     },
-    directives: {
-        autoHeight: {
-            update(el, binding) {
-                const { value } = binding
-                if (value && typeof value === 'number') {
-                    el.style.height = `${value}px`
-                } else {
-                    el.style.height = 'auto'
-                }
-            },
-            componentUpdated(el) {
-                el.style.height = `${el.scrollHeight + 5}px`
-            },
-        },
+    cJson: {
+      handler(newVal) {
+        console.log(newVal);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
     },
-    watch: {
-        checkJson: {
-            handler(newVal) {
-                this.$emit("setJson", newVal)
-                console.log('checkW',this.cJson);
-            },
-            deep: true
-        },
-        cJson: {
-            handler(newVal) {
-                console.log(newVal);
-            },
-            deep: true
-        }
+    changeAnswer() {
+      this.checkJson.answer = [];
     },
-    methods: {
-        depthCopy(s) {
-            return JSON.parse(JSON.stringify(s));
-        },
-        changeAnswer() {
-            this.checkJson.answer = []
-        },
-        checkChange(val) {
-            if (this.checkJson.type == 1) {
-                this.checkJson.answer = [val]
-            }
-        },
-        numberPan() {
-            if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
-                this.$message.error('请输入大于0的数字')
-                this.checkJson.score = ''
-            }
-        },
-        addOption() {
-            this.checkJson.array.push({ option: "选项" + (this.checkJson.array.length + 1), img: "" })
-        },
-        addOption2(index) {
-            this.checkJson.array.splice(index+1, 0, { option: "选项", img: "" })
-        },
-        deleteOption(index) {
-            this.checkJson.array.splice(index, 1)
-            if (this.checkJson.answer.indexOf(index) != -1) {
-                this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1)
-            }
-        }
+    checkChange(val) {
+      if (this.checkJson.type == 1) {
+        this.checkJson.answer = [val];
+      }
     },
-    mounted() {
-        console.log(1);
-        // console.log(this.cJson);
-        if (!this.cJson) {
-            this.checkJson = {
-                title: "标题",
-                type: 1,
-                array: [
-                    { option: "选项1", img: "" },
-                    { option: "选项2", img: "" }
-                ],
-                answer: ""
-            };
-        } else {
-            this.checkJson = this.depthCopy(this.cJson);
-        }
-        console.log('check',this.cJson);
+    numberPan() {
+      if (/[^\d]/.test(this.checkJson.score) || this.checkJson.score < 0) {
+        this.$message.error("请输入大于0的数字");
+        this.checkJson.score = "";
+      }
     },
-}
+    addOption() {
+      this.checkJson.array.push({
+        option: "选项" + (this.checkJson.array.length + 1),
+        img: ""
+      });
+    },
+    addOption2(index) {
+      this.checkJson.array.splice(index + 1, 0, { option: "选项", img: "" });
+    },
+    deleteOption(index) {
+      this.checkJson.array.splice(index, 1);
+      if (this.checkJson.answer.indexOf(index) != -1) {
+        this.checkJson.answer.splice(this.checkJson.answer.indexOf(index), 1);
+      }
+    }
+  },
+  mounted() {
+    console.log(1);
+    // console.log(this.cJson);
+    if (!this.cJson) {
+      this.checkJson = {
+        title: "标题",
+        type: 1,
+        array: [
+          { option: "选项1", img: "" },
+          { option: "选项2", img: "" }
+        ],
+        answer: ""
+      };
+    } else {
+      this.checkJson = this.depthCopy(this.cJson);
+    }
+    console.log("check", this.cJson);
+  }
+};
 </script>
 
 <style scoped>
 .choice_box {
-    margin-top: 10px;
-    width: 100%;
-    background: #f5f6f7;
-    padding: 10px 10px 10px 36px;
-    box-sizing: border-box;
-    position: relative;
+  margin-top: 10px;
+  width: 100%;
+  background: #f5f6f7;
+  padding: 10px 10px 10px 36px;
+  box-sizing: border-box;
+  position: relative;
 }
 
-.choice_box>.box {}
+.choice_box > .box {
+}
 
 .set_type {
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
 }
 
 .set_title {
-    margin-top: 10px;
-    display: flex;
-    align-items: center;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
 }
 
-.set_type>span,
-.set_title>span {
-    min-width: fit-content;
-    font-size: 15px;
-    min-width: 90px;
-    text-align: right;
+.set_type > span,
+.set_title > span {
+  min-width: fit-content;
+  font-size: 15px;
+  min-width: 90px;
+  text-align: right;
 }
 
 .set_options {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
-.set_options>.title {
-    font-size: 15px;
+.set_options > .title {
+  font-size: 15px;
 }
 
 .xuan_body {
-    margin-top: 10px;
-    font-size: 14px;
+  margin-top: 10px;
+  font-size: 14px;
 }
 
-.xuan_body>.xuan_title {
-    display: flex;
-    align-items: center;
-    background: #e1e1e1;
-    height: 40px;
-    padding: 0 10px;
-    box-sizing: border-box;
-    justify-content: space-between;
+.xuan_body > .xuan_title {
+  display: flex;
+  align-items: center;
+  background: #e1e1e1;
+  height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  justify-content: space-between;
 }
 
-.xuan_body>.xuan_box {
-    display: flex;
-    align-items: center;
-    min-height: 40px;
-    padding: 0 10px;
-    box-sizing: border-box;
-    justify-content: space-between;
-    margin-top: 10px;
+.xuan_body > .xuan_box {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
 .xuan_1 {
-    display: flex;
-    /* width: calc(100% - 340px); */
-    width: calc(100% - 100px);
-    align-items: center;
+  display: flex;
+  /* width: calc(100% - 340px); */
+  width: calc(100% - 100px);
+  align-items: center;
 }
 
 .xuan_2 {
-    width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .xuan_3 {
-    width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.xuan_3>>>.el-checkbox__label {
-    display: none;
+.xuan_3 >>> .el-checkbox__label {
+  display: none;
 }
 
 .xuan_4 {
-    width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.set_options>.btn {
-    margin-top: 10px;
+.set_options > .btn {
+  margin-top: 10px;
 }
 
 /* .jiao::before{
@@ -263,34 +303,34 @@ export default {
 } */
 
 .binfo_input {
-    width: 100%;
-    margin: 0;
-    padding: 12px 14px;
-    display: block;
-    min-width: 0;
-    outline: none;
-    box-sizing: border-box;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    background: #fff;
-    font-size: 16px;
-    resize: none;
-    font-family: 'Microsoft YaHei';
-    min-height: 48px;
-    /* border: 1px solid #3682fc00; */
-    border: 1px solid #CAD1DC;
+  width: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  display: block;
+  min-width: 0;
+  outline: none;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 16px;
+  resize: none;
+  font-family: "Microsoft YaHei";
+  min-height: 48px;
+  /* border: 1px solid #3682fc00; */
+  border: 1px solid #cad1dc;
 }
 
 .binfo_textarea {
-    border: 1px solid #CAD1DC;
-    font-size: 16px;
-    resize: none;
-    /* background: #f6f6f6; */
-    font-family: 'Microsoft YaHei';
+  border: 1px solid #cad1dc;
+  font-size: 16px;
+  resize: none;
+  /* background: #f6f6f6; */
+  font-family: "Microsoft YaHei";
 }
 
 .binfo_input:focus-visible {
-    border: 1px solid #3681FC !important;
+  border: 1px solid #3681fc !important;
 }
-</style>
+</style>