From 4be582eef716b2aa5fb243fbf19a9263083fa8e8 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 19 六月 2024 10:06:28 +0800
Subject: [PATCH] 连线题优化
---
src/components/matching/matching.vue | 147 ++++++++++++++++++++++++++++--------------------
1 files changed, 85 insertions(+), 62 deletions(-)
diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
index bc1023a..f0d49c7 100644
--- a/src/components/matching/matching.vue
+++ b/src/components/matching/matching.vue
@@ -15,10 +15,9 @@
:key="index"
ref="left"
@mousedown="(e) => touchstart(e, item, index)"
- :style="{backgroundColor:primaryColor}"
- >
- {{ item.label.txt }}
- </div>
+ :style="{ backgroundColor: primaryColor }"
+ v-html="item.label.txt"
+ ></div>
</div>
<div class="answer-box">
<div
@@ -26,10 +25,9 @@
v-for="(item, index) in rightArr"
:key="index"
ref="right"
- :style="{backgroundColor:primaryColor}"
- >
- {{ item.label.txt }}
- </div>
+ :style="{ backgroundColor: primaryColor }"
+ v-html="item.label.txt"
+ ></div>
</div>
</div>
<canvas
@@ -48,17 +46,24 @@
<!-- 鎸夐挳 -->
<div class="btn-bottom">
<el-button @click="submitData">鎻愪氦</el-button>
- <el-button @click="saveData" :style="{borderColor:primaryColor}">淇濆瓨</el-button>
- <el-button @click="redo" >閲嶅仛</el-button>
- <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">鏌ョ湅绛旀</el-button>
+ <el-button @click="saveData" :style="{ borderColor: primaryColor }"
+ >淇濆瓨</el-button
+ >
+ <el-button @click="redo">閲嶅仛</el-button>
+ <el-button @click="handleAnswer" :style="{ borderColor: primaryColor }"
+ >鏌ョ湅绛旀</el-button
+ >
</div>
<!-- 瑙ｆ瀽 -->
<ul class="show-answer" v-if="isShowAnswer">
- <li v-if="isRight !== null">绛旀缁撴灉锛�<span v-if="isRight" style="color: #83e089;">姝ｇ‘</span> <span v-if="isRight == false" style="color:#d81e06">閿欒</span></li>
+ <li v-if="isRight !== null">
+ 绛旀缁撴灉锛�<span v-if="isRight" style="color: #83e089">姝ｇ‘</span>
+ <span v-if="isRight == false" style="color: #d81e06">閿欒</span>
+ </li>
<li class="show-answer-box">
<div>绛旀:</div>
<div>
- <img :src="item.answerImg" alt="" class="w100">
+ <img :src="question.answerImg" alt="" class="w100" />
</div>
</li>
</ul>
@@ -85,8 +90,8 @@
checkItemIndex: null,
isShowAnswer: false,
isRight: null,
- value:[],
- pageNum:null
+ value: [],
+ pageNum: null,
};
},
props: {
@@ -99,16 +104,16 @@
};
},
},
- item: {
+ question: {
type: Object,
default: () => {
return [];
},
},
- primaryColor:{
- type:String,
- default:"#0bab87"
- }
+ primaryColor: {
+ type: String,
+ default: "#0bab87",
+ },
},
watch: {
rawData: {
@@ -120,7 +125,7 @@
},
mounted() {
// 鑾峰彇褰撳墠椤电爜锛岀敤浜庡尮閰嶆湰娆″瓨鍌ㄩ鐩暟鎹�
- this.pageNum = this.handlePage()
+ this.pageNum = this.handlePage();
// 娣诲姞婊氬姩浜嬩欢 鐩戝惉 瑙ｅ喅鍥犱负婊氬姩寮曡捣鐨勬嫋鍔ㄧ嚎涓嶅鐨勯棶棰�
window.addEventListener(
"scroll",
@@ -142,7 +147,7 @@
this.$nextTick(() => {
this.drawing();
});
- this.getAnswer()
+ this.getAnswer();
},
methods: {
init() {
@@ -182,14 +187,15 @@
// 瑙︽懜缁撴潫
touchend(e, index) {
this.isDragging = false;
- if (this.item.showAnswer) {
+ if (this.question.showAnswer) {
return false;
}
// let event = e.changedTouches[0];
// document.elementFromPoint 閲嶇偣锛屾牴鎹畑,y鍧愭爣 鍙栧綋鍓嶅厓绱� 鎵�鏈夎兘杩愯鐨勯�昏緫 閮戒緷鎵樹簬杩欓噷銆�
- let dom = (
- this.container ? this.container : document
- ).elementFromPoint(e.pageX, e.pageY);
+ let dom = (this.container ? this.container : document).elementFromPoint(
+ e.pageX,
+ e.pageY
+ );
// 鍙宠竟鐨刣om鏄摢涓�
let right = this.rightDom.find((r) => r.bom === dom);
// 涓嶇鏄摢涓兘娓呴櫎鎺� 搴曢儴鐨勭嚎
@@ -220,7 +226,7 @@
})
.filter((r) => r.right !== undefined);
this.$emit("input", model);
- this.item.userChoise = model;
+ this.question.userChoise = model;
// console.log(JSON.stringify(model));
},
// 瑙︽懜寮�濮�
@@ -239,7 +245,7 @@
// touchmove(e, item) {
// if(!this.isDragging) return false
// console.log('绉诲姩',e);
- // if (this.item.showAnswer) {
+ // if (this.question.showAnswer) {
// return false;
// }
// // let event = e.targetTouches[0];
@@ -251,7 +257,7 @@
// 绉诲姩涓�
mousemove(e) {
if (!this.isDragging) return false;
- if (this.item.showAnswer) {
+ if (this.question.showAnswer) {
return false;
}
this.checkItem.line[2] = e.pageX;
@@ -329,10 +335,10 @@
// 鎻愪氦
submitData() {
const answerArr = [];
- const values = this.item.options.values;
+ const values = this.question.options.values;
for (let index = 0; index < values.length; index++) {
const item = values[index];
- const rightIndex = this.item.options.linkValues.findIndex(
+ const rightIndex = this.question.options.linkValues.findIndex(
(citem) => citem.oldId == item.oldId
);
answerArr.push({
@@ -340,28 +346,21 @@
right: rightIndex,
});
}
- this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
- this.item.showAnswer = true
- // console.log(
- // "绛旀",
- // answerArr,
- // this.item.userChoise,
- // this.isRight
- // );
+ this.isRight = this.areArraysEqual(this.question.userChoise, answerArr);
+ this.isShowAnswer = true;
},
// 鑾峰彇褰撳墠椤电爜
handlePage() {
- let pageNum = null
+ let pageNum = null;
const element = (
this.container ? this.container : document
).querySelector("matching");
if (element) {
- pageNum = this.getParentWithClass(
- element,
- "page-box"
- ).getAttribute("page");
+ pageNum = this.getParentWithClass(element, "page-box").getAttribute(
+ "page"
+ );
}
- return pageNum
+ return pageNum;
},
getParentWithClass(element, className) {
while (element.parentElement) {
@@ -373,30 +372,38 @@
},
// 鑾峰彇鏈湴瀛樺偍棰樼洰绛旀
getAnswer() {
- const data = localStorage.getItem(this.config.activeBook.name + '-matching-' + this.pageNum)
- if(data) {
- this.value = JSON.parse(data)
+ const data = localStorage.getItem(
+ this.config.activeBook.name + "-matching-" + this.pageNum
+ );
+ if (data) {
+ this.value = JSON.parse(data);
}
},
// 淇濆瓨
saveData() {
- if(this.item.userChoise.length)
- localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
+ if (this.question.userChoise.length)
+ localStorage.setItem(
+ this.config.activeBook.name + "-matching-" + this.pageNum,
+ JSON.stringify(this.question.userChoise)
+ );
// console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
},
// 閲嶅仛
redo() {
- this.item.showAnswer = false
- localStorage.removeItem(this.config.activeBook.name + '-matching-' + this.pageNum)
- this.value = []
+ this.question.showAnswer = false;
+ localStorage.removeItem(
+ this.config.activeBook.name + "-matching-" + this.pageNum
+ );
+ this.value = [];
for (let index = 0; index < this.leftArr.length; index++) {
const item = this.leftArr[index];
- item.value = []
- item.line = []
+ item.value = [];
+ item.line = [];
}
- this.leftArr
- this.drawing()
- }
+ this.leftArr;
+ this.drawing();
+ this.isShowAnswer = false;
+ },
},
};
</script>
@@ -464,7 +471,7 @@
height: min-content;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
li {
- padding:10px
+ padding: 10px;
}
}
.btn-bottom {
@@ -472,10 +479,26 @@
margin: 70px auto 0 auto;
display: flex;
justify-content: space-evenly;
+ flex-wrap: wrap;
+ .el-button {
+ margin-top: 10px;
+ }
}
.el-button {
- height:30px;
- padding:7px;
- min-width: 78px
+ height: 30px;
+ padding: 7px;
+ min-width: 78px;
+}
+.answer-box-item {
+ /deep/ .un1 {
+ -webkit-text-emphasis-style: dot;
+ -moz-text-emphasis-style: dot;
+ -ms-text-emphasis-style: dot;
+ text-emphasis-style: dot;
+ -webkit-text-emphasis-position: under;
+ -moz-text-emphasis-position: under;
+ -ms-text-emphasis-position: under;
+ text-emphasis-position: under;
+ }
}
</style>
--
Gitblit v1.9.1