From 2dfe58ec96a3ec0a560a9bd38e04f363d938bbdc Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期四, 13 六月 2024 14:12:57 +0800 Subject: [PATCH] 优化 --- src/components/examinations/index.vue | 78 ++++++++++++++++++++++++-------------- 1 files changed, 49 insertions(+), 29 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 393f4cb..5efb3b0 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,5 +1,5 @@ <template> - <div class="examination" v-loading="!cardData.length"> + <div class="examination" v-loading="loading"> <div v-for="(item, nindex) in cardData" :key="nindex" @@ -68,7 +68,7 @@ v-for="(itemText, indexText) in value.stem" :key="indexText" > - <span v-if="typeof itemText == 'string'">{{ itemText }}</span> + <span v-if="typeof itemText == 'string'" v-html="itemText" ></span> <!-- --> <el-input v-else @@ -124,7 +124,9 @@ :src="getPublicImage(content.img, 115)" v-show="content.img" :preview-src-list="[getPublicImage(content.img)]" + v-if="isReal" ></el-image> + <img :src="content.img" alt="" v-if="!isReal" class="radio-img"> </p> <p class="optionContent" @@ -402,17 +404,17 @@ </ul> </div> <div class="bottom-btn" v-if="!loading"> - <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button> <el-button @click="handleQuestion" - class="btn-box" + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鎻愪氦</el-button > - <el-button @click="redo" class="btn-box">閲嶅仛</el-button> + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> <el-button @click="openAnswers" - class="btn-box" + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鏌ョ湅绛旀</el-button > @@ -426,7 +428,6 @@ props: { cardList: { type: Array, - default: [], }, primaryColor: { type: String, @@ -438,22 +439,37 @@ page: { type: Number, }, + isReal:{ + type:Boolean, + default:true + } }, data() { return { type: "option", loading: false, - cardData:[] + cardData:[], + loading:true, + }; }, - inject:['changeQuestionData'], - mounted() { - this.cardData = this.cardList - }, - computed:{ - cardLists() { - return this.props.cardList + watch:{ + cardList:{ + handler(newVal) { + console.log('11',newVal); + this.cardData = this.cardList + if(newVal && newVal.length) { + this.loading = false + } + }, + immediate:true, + deep:true } + }, + mounted() { + // this.cardData = this.cardList + // console.log('this.cardList',this.cardList); + // console.log('this.cardData',this.cardData); }, methods: { // 鏁扮粍杞负瀛楃涓叉柟娉� @@ -488,20 +504,19 @@ } }, redo() { - for (let index = 0; index < this.cardList.length; index++) { - const item = this.cardList[index]; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; citem.userAnswer = ""; citem.isComplete = false; } } - console.log('閲嶅仛',this.cardList); }, openAnswers() { this.$data.loading = true; - for (let index = 0; index < this.cardList.length; index++) { - const item = this.cardList[index]; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; citem.isComplete = true; @@ -514,7 +529,7 @@ }, // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) handleQuestion() { - const list = this.$props.cardList; + const list = this.cardData; for (let index = 0; index < list.length; index++) { const item = list[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { @@ -559,8 +574,8 @@ } } } - this.$props.cardList = list; - console.log(this.$props.cardList); + this.cardData = list; + console.log(this.cardData); }, getParentWithClass(element, className) { while (element.parentElement) { @@ -572,20 +587,20 @@ }, // 淇濆瓨鎸夐挳 saveAnswer() { - const element = document.getElementsByClassName("examination")[0]; + const element = (this.container ? this.container : document + ).querySelector(".examination"); if (element) { const pageNum = this.getParentWithClass( element, "page-box" ).getAttribute("page"); - console.log(this.config.activeBook.name, pageNum); const oldAnswerData = localStorage.getItem( this.config.activeBook.name + "oldAnswerData" ); let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {}; const asnwerList = []; - for (let index = 0; index < this.$props.cardList.length; index++) { - const item = this.$props.cardList[index]; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; asnwerList.push({ @@ -595,7 +610,8 @@ } } if(oldData[pageNum]) { - oldData[pageNum].push(asnwerList) + oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 ) + oldData[pageNum].push(...asnwerList) } else { oldData[pageNum] = asnwerList } @@ -629,7 +645,7 @@ list-style: none; } } -.btn-box { +.examinations-btn-box { height: 30px; width: 78px; padding: 4px 10px; @@ -1126,4 +1142,8 @@ margin-top: 10px; } } +.radio-img { + width: 200px; + object-fit: contain; +} </style> -- Gitblit v1.9.1