From 595ea01dd601760f570c711009dd2602a1eeab87 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 03 六月 2024 17:34:44 +0800
Subject: [PATCH] 合并
---
src/components/matching/matching.vue | 338 ++++++++++++++++++++++++++++++
src/books/English/view/components/header.vue | 224 ++++++++++++++++++-
src/App.vue | 2
src/books/childHealth/view/content/index.vue | 70 ++---
4 files changed, 578 insertions(+), 56 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 7b83102..ddefc3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,7 +70,7 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "childHealth"
+ this.config.resourceCtx + "english"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/English/view/components/header.vue b/src/books/English/view/components/header.vue
index 76f5e03..23782d6 100644
--- a/src/books/English/view/components/header.vue
+++ b/src/books/English/view/components/header.vue
@@ -1,15 +1,18 @@
<template>
<div class="chapter" num="1">
+ <!-- <div class="page-box">
+ <matching :rawData="rawData" :item="question" :value="value"></matching>
+ </div> -->
<!-- -->
<div class="page-box mt-20" page="1">
<div v-if="showPageList.indexOf(1) > -1">
- <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+ <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
</div>
</div>
<!-- 1 -->
<div class="page-box" page="2">
<div v-if="showPageList.indexOf(2) > -1">
- <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
+ <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
</div>
</div>
<!-- 2 -->
@@ -71,24 +74,26 @@
</div>
</div>
<!-- 3 -->
- <div class="page-box " page="4">
+ <div class="page-box" page="4">
<div v-if="showPageList.indexOf(4) > -1">
- <div class="pd-20 ">
+ <div class="pd-20">
<div class="preface w100 fl al-end ju-cn">
<h1 id="a003" class="front preface-text">鍓嶈█</h1>
- </div>
+ </div>
</div>
- <div class="bodystyle padding-93 pb-104 ">
+ <div class="bodystyle padding-93 pb-104">
<p>
銆婃柊鏍囧噯閫氱敤鑱屽満鑻辫銆嬬殑缂栧啓鍥㈤槦浠ュ厷鐨勬暀鑲叉柟閽堜负瀹楁棬锛岃疮褰诲厷鐨勪簩鍗佸ぇ鎶ュ憡绮剧锛屽鏍囥�婇珮绛夎亴涓氭暀鑲蹭笓绉戣嫳璇绋嬫爣鍑嗭紙2021骞寸増锛夈�嬶紝閬靛惊銆婇珮绛夊鏍¤绋嬫�濇斂寤鸿鎸囧绾茶銆嬬殑瑕佹眰锛屽弬鐓с�婁腑鍥借嫳璇兘鍔涚瓑绾ч噺琛ㄣ�嬪洓绾у拰浜旂骇鑳藉姏瑕佹眰锛岀珛瓒抽珮鑱岃嫳璇暀瀛﹀疄闄咃紝杩涜璁捐鍜岀紪鍐欙紝鏃㈡敞閲嶆彁鍗囧鐢熺殑鏍稿績绱犲吇銆佷績杩涙櫘鑱岃瀺閫氾紝鍙堝叏鏂逛綅铻嶅叆璇剧▼鎬濇斂锛岃惤瀹炵珛寰锋爲浜烘牴鏈换鍔°��
</p>
- <p class="center primary-title-color "><b>涓�銆佹暀鏉愮紪鍐欑悊蹇�</b></p>
+ <p class="center primary-title-color"><b>涓�銆佹暀鏉愮紪鍐欑悊蹇�</b></p>
<p><span class="kaiti">1.鍏ㄩ潰璐交钀藉疄鏂拌绋嬫爣鍑嗚姹�</span></p>
<p>
銆婃柊鏍囧噯閫氱敤鑱屽満鑻辫銆嬬郴鍒楁暀鏉愬叏闈㈠鏍囥�婇珮绛夎亴涓氭暀鑲蹭笓绉戣嫳璇绋嬫爣鍑嗭紙2021骞寸増锛夈�嬶紝鍏呭垎绐佸嚭楂樿亴鑻辫璇剧▼鐨勬�濇兂鎬с�佺瀛︽�с�佽亴涓氭�с�佹椂浠ｆ�э紝鍏虫敞鍚勫娈电殑琛旀帴鎬э紝瀹炵幇浠峰�煎紩棰嗭紝鍩瑰吇瀛︾敓鐨勫繀澶囪兘鍔涘拰鍏抽敭鑳藉姏銆�
</p>
<p>
- <span class="kaiti ">2.鍏ㄧ▼铻嶅叆璇剧▼鎬濇斂锛屽桨鏄捐瑷�璇剧▼鐨勮偛浜哄姛鑳�</span>
+ <span class="kaiti"
+ >2.鍏ㄧ▼铻嶅叆璇剧▼鎬濇斂锛屽桨鏄捐瑷�璇剧▼鐨勮偛浜哄姛鑳�</span
+ >
</p>
<p>
鏁欐潗浠庡崟鍏冧富棰樸�佺礌鏉愰�夊彇銆佺粌涔犺缃瓑鍚勬柟闈㈢患鍚堣璁★紝绱у瘑鑱旂郴涓浗绀句細鍜屾枃鍖栵紝寮樻壃姝ｈ兘閲忋�傚湪鎻愬崌瀛︾敓鏍稿績绱犲吇鐨勫悓鏃讹紝寮曞瀛︾敓鍏虫敞绀句細锛屽叧娉ㄤ粬浜猴紝娼滅Щ榛樺寲鍦板煿鍏诲鐢熺殑瀹跺浗鎯呮��鍜屼汉鏂囩礌鍏伙紝澧炲己瀛︾敓鍦ㄥ鍏冩枃鍖栦氦娴佺幆澧冧腑璁茶堪涓浗鏁呬簨鍜屾帹浠嬩腑鍥芥枃鍖栫殑鑳藉姏銆傛暀鏉愪互鈥滅珛寰锋爲浜衡�濅负鏍规湰浠诲姟锛岀珛瓒虫柊鏃朵唬涓浗鑱屼笟鏁欒偛澶ц儗鏅紝浠ヨ亴涓氫负鍏抽敭璇嶏紝閫夊彇鑱屼笟涓庝釜浜恒�佽亴涓氫笌绀句細銆佽亴涓氫笌鐜涓婚鐨勮瑷�鏉愭枡锛屽湪鍔╁姏璇█鏁欏鐨勫悓鏃讹紝寮曞瀛︾敓璐＄尞绀句細銆佸叧蹇冪ぞ浼氥�佺埍宀楁暚涓氾紝瀹炵幇鍏叡鑻辫璇剧▼鍩规牴閾搁瓊銆佸惎鏅哄鎱х殑鍔熻兘锛屼績杩涘鐢熷叏闈㈠彂灞曘��
@@ -103,8 +108,11 @@
<!-- 4 -->
<div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -1">
- <div class="mb-20" style="padding-right: 20px;">
- <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
+ <div class="mb-20" style="padding-right: 20px">
+ <div
+ class="primary-bc fl al-end"
+ style="height: 100px; padding-left: 40px"
+ >
<div class="preface-header-box y-bc">
<span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
<span class="g-text g-color">鍩虹妯″潡涓�</span>
@@ -148,9 +156,9 @@
</div>
<!-- 5 -->
<div class="page-box" page="6">
- <div v-if="showPageList.indexOf(6) > -1">
+ <div v-if="showPageList.indexOf(6) > -1">
<ul class="preface-odd-header w100 fl ju-bt">
- <li class="left primary-bc "></li>
+ <li class="left primary-bc"></li>
<li>
<span class="primary-bc">鍓� 瑷�</span>
<span class="y-bc"></span>
@@ -187,13 +195,195 @@
</template>
<script>
+import matching from "@/components/matching/matching.vue";
export default {
name: "page-header",
- props:{
- showPageList:{
- type:Array
- }
- }
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+ data() {
+ return {
+ rawData: {
+ left: [
+ {
+ oldId: "FB34",
+ txt: "1",
+ },
+ {
+ oldId: "64D6",
+ txt: "2",
+ },
+ {
+ oldId: "2ED4",
+ txt: "3",
+ },
+ {
+ oldId: "44DE",
+ txt: "4",
+ },
+ {
+ oldId: "A701",
+ txt: "5",
+ },
+ {
+ oldId: "A865",
+ txt: "6",
+ },
+ {
+ oldId: "D2A3",
+ txt: "7",
+ },
+ ],
+ right: [
+ {
+ oldId: "64D6",
+ txt: "B",
+ },
+ {
+ oldId: "FB34",
+ txt: "A",
+ },
+ {
+ oldId: "2ED4",
+ txt: "C",
+ },
+ {
+ oldId: "44DE",
+ txt: "D",
+ },
+ {
+ oldId: "A701",
+ txt: "E",
+ },
+ {
+ oldId: "D2A3",
+ txt: "G",
+ },
+ {
+ oldId: "A865",
+ txt: "F",
+ },
+ ],
+ },
+ value: [],
+ question: {
+ KnowledgePoint: "123",
+ analysis: "123",
+ answer: [
+ {
+ id: "FB34",
+ linkValue: "A",
+ value: "1",
+ },
+ {
+ id: "64D6",
+ linkValue: "B",
+ value: "2",
+ },
+ {
+ id: "2ED4",
+ linkValue: "C",
+ value: "3",
+ },
+ {
+ id: "44DE",
+ linkValue: "D",
+ value: "4",
+ },
+ {
+ id: "A701",
+ linkValue: "E",
+ value: "5",
+ },
+ {
+ id: "A865",
+ linkValue: "F",
+ value: "6",
+ },
+ {
+ id: "D2A3",
+ linkValue: "G",
+ value: "7",
+ },
+ ],
+ optionStyle:undefined,
+ id: 489306,
+ options: {
+ linkValues: [
+ {
+ oldId: "64D6",
+ txt: "B",
+ },
+ {
+ oldId: "FB34",
+ txt: "A",
+ },
+ {
+ oldId: "2ED4",
+ txt: "C",
+ },
+ {
+ oldId: "44DE",
+ txt: "D",
+ },
+ {
+ oldId: "A701",
+ txt: "E",
+ },
+ {
+ oldId: "D2A3",
+ txt: "G",
+ },
+ {
+ oldId: "A865",
+ txt: "F",
+ },
+ ],
+ values:[
+ {
+ oldId: "FB34",
+ txt: "1",
+ },
+ {
+ oldId: "64D6",
+ txt: "2",
+ },
+ {
+ oldId: "2ED4",
+ txt: "3",
+ },
+ {
+ oldId: "44DE",
+ txt: "4",
+ },
+ {
+ oldId: "A701",
+ txt: "5",
+ },
+ {
+ oldId: "A865",
+ txt: "6",
+ },
+ {
+ oldId: "D2A3",
+ txt: "7",
+ },
+ ]
+ },
+ questionType: "matching",
+ stem:{
+ stemTxt: "鎸夐『搴忚繛绾�"
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise:[],
+ value:[]
+ },
+ };
+ },
};
</script>
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index afb0c52..663fc02 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -8,7 +8,7 @@
:style="{
fontSize: fontSize ? fontSize + 'px' : '16px',
transform: `scale(${pageZoom ? pageZoom : 1})`,
- transformOrigin: 'center top'
+ transformOrigin: 'center top',
}"
>
<pageHeader
@@ -122,7 +122,7 @@
loadPageList: [],
questionDataMap: {},
renderSignMap: {},
- highlightData: null
+ highlightData: null,
};
},
computed: {
@@ -131,7 +131,7 @@
},
pageZoom() {
return this.$store.state.qiankun.scale / 100;
- }
+ },
},
watch: {
showCatalogList: {
@@ -142,7 +142,7 @@
) {
// 璋冪敤鐖跺眰鏂规硶
this.$store.state.qiankun.catalogChange({
- showCatalogList: newVal
+ showCatalogList: newVal,
});
}
// 鍚姩椤电爜瑙傚療
@@ -150,7 +150,7 @@
this.initObservation();
this.initThemeColor();
}, 500);
- }
+ },
},
loadPageList: {
handler(newVal, oldVal) {
@@ -158,7 +158,7 @@
this.initSwiper();
this.initViewer();
}, 200);
- }
+ },
},
pageZoom: {
handler(newVal, oldVal) {
@@ -166,8 +166,8 @@
this.container ? this.container : document
).querySelector(".page-main");
scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
- }
- }
+ },
+ },
},
mounted() {
// 榛樿鍔犺浇绔犺妭
@@ -202,7 +202,7 @@
// 璺宠浆妫�绱㈢粨鏋滀綅缃�
jumpSearchItem: (data) => {
this.searchItemLocation(data);
- }
+ },
});
}
@@ -211,13 +211,13 @@
this.observer = new IntersectionObserver(this.pageChangeCallback, {
root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
- threshold: 0.5 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
});
this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
- threshold: 0 // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
});
// 鍚姩椤电爜瑙傚療
@@ -328,7 +328,7 @@
this.showCatalogList = [
this.catalogLength - 2,
this.catalogLength - 1,
- this.catalogLength
+ this.catalogLength,
];
} else {
this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -378,9 +378,7 @@
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = (
- this.container ? this.container : document
- ).createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
+ const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
@@ -586,7 +584,7 @@
this.$store.state.qiankun.pageChange({
page: page,
catalog: catalog,
- text
+ text,
});
// const sections = Array.from(document.querySelectorAll(".section"));
//sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
@@ -645,9 +643,7 @@
// 楂樹寒琛�
setTimeout(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = (
- this.container ? this.container : document
- ).createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -691,7 +687,7 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
@@ -703,11 +699,11 @@
),
prevEl: (this.container ? this.container : document).querySelector(
".swiper-button-prev"
- )
+ ),
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
- observeParents: true
+ observeParents: true,
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -735,7 +731,7 @@
),
prevEl: (this.container ? this.container : document).querySelector(
".swiper-button-prev"
- )
+ ),
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -754,8 +750,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- }
- }
+ },
+ },
});
}
},
@@ -771,7 +767,7 @@
: "body",
navbar: true, // 鏄剧ず瀵艰埅鏍�
toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true // 鏄剧ず鏍囬
+ title: true, // 鏄剧ず鏍囬
});
}
},
@@ -794,7 +790,7 @@
chapterTen,
chapterEleven,
chapterTwelve,
- chapterThirteen
+ chapterThirteen,
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -805,8 +801,8 @@
pageExample = new pageComponent({
propsData: {
showPageList: [],
- questionData: {}
- }
+ questionData: {},
+ },
});
pageExample.$mount(
(this.container ? this.container : document).querySelector(
@@ -836,8 +832,8 @@
pageExample = new pageComponent({
propsData: {
showPageList: [pageNum],
- questionData: {}
- }
+ questionData: {},
+ },
});
pageExample.$mount(
(this.container ? this.container : document).querySelector(
@@ -850,9 +846,7 @@
.querySelector(`[page="${pageNum}"]`);
if (thisPageDom) {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = (
- this.container ? this.container : document
- ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -869,7 +863,7 @@
page: pageNum,
catalog: catalogIndex,
txt: textDom.textContent,
- txtIndex: txtIndex
+ txtIndex: txtIndex,
});
}
}
@@ -892,7 +886,7 @@
this.highlightData = data;
// 璺宠浆
this.gotoPage(data.catalog, data.page, () => {});
- }
+ },
},
components: {
pageHeader,
@@ -908,8 +902,8 @@
chapterTen,
chapterEleven,
chapterTwelve,
- chapterThirteen
- }
+ chapterThirteen,
+ },
};
</script>
diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
new file mode 100644
index 0000000..a33045c
--- /dev/null
+++ b/src/components/matching/matching.vue
@@ -0,0 +1,338 @@
+<template>
+ <div class="connect" id="connect" ref="connect" @mouseup="mouseup">
+ <div class="answer" @mousemove="mousemove">
+ <div class="answer-box">
+ <div
+ class="answer-box-item"
+ v-for="(item, index) in leftArr"
+ :key="index"
+ ref="left"
+ @mousedown="(e) => touchstart(e, item, index)"
+
+ >
+ {{ item.label.txt }}
+ </div>
+ </div>
+ <div class="answer-box">
+ <div
+ class="answer-box-item"
+ v-for="(item, index) in rightArr"
+ :key="index"
+ ref="right"
+ @mouseup="(e) => touchend(e, item, index)"
+ >
+ {{ item.label.txt }}
+ </div>
+ </div>
+ </div>
+ <canvas
+ class="connect-canvasA"
+ :width="clientWidth"
+ :height="clientHeight"
+ ref="canvasA"
+ ></canvas>
+ <canvas
+ class="connect-canvasB"
+ :width="clientWidth"
+ :height="clientHeight"
+ ref="canvasB"
+ ></canvas>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ isDragging: false,
+ leftArr: [],
+ rightArr: [],
+ location: [],
+ canvasA: null,
+ canvasB: null,
+ leftDom: [],
+ rightDom: [],
+ clientWidth: 0,
+ clientHeight: 0,
+ scrollTop: 0,
+ debounce: false,
+ checkItem: null,
+ };
+ },
+ props: {
+ rawData: {
+ type: Object,
+ default: () => {
+ return {
+ left: [],
+ right: [],
+ };
+ },
+ },
+ value: {
+ type: Array,
+ default: () => {
+ return [];
+ },
+ },
+ item: {
+ type: Object,
+ default: () => {
+ return [];
+ },
+ },
+ },
+ watch: {
+ rawData: {
+ immediate: true,
+ handler(val) {
+ if (val.left && val.left.length) this.init();
+ },
+ },
+ },
+ mounted() {
+ // 娣诲姞婊氬姩浜嬩欢 鐩戝惉 瑙ｅ喅鍥犱负婊氬姩寮曡捣鐨勬嫋鍔ㄧ嚎涓嶅鐨勯棶棰�
+ window.addEventListener(
+ "scroll",
+ (e) => {
+ // 鍔犱釜闃叉姈
+ if (this.debounce) clearTimeout(this.debounce);
+ this.debounce = setTimeout(() => {
+ this.debounce = false;
+ this.scrollTop = e.target.scrollTop;
+ }, 500);
+ },
+ true
+ );
+ let connect = this.$refs.connect;
+ this.clientWidth = connect.clientWidth;
+ this.clientHeight = connect.clientHeight;
+ this.canvasA = this.$refs.canvasA.getContext("2d");
+ this.canvasB = this.$refs.canvasB.getContext("2d");
+ this.$nextTick(() => {
+ this.drawing();
+ });
+ },
+ methods: {
+ init() {
+ this.leftArr = this.rawData.left.map((r) => {
+ return {
+ label: r,
+ line: [],
+ value: [],
+ };
+ });
+ this.rightArr = this.rawData.right.map((r) => {
+ return {
+ label: r,
+ };
+ });
+ // 绛塪om 娓叉煋瀹屾垚
+ this.$nextTick(() => {
+ this.leftDom = this.$refs.left.map((r, i) => {
+ return {
+ bom: r,
+ index: i,
+ };
+ });
+ this.rightDom = this.$refs.right.map((r, i) => {
+ return {
+ bom: r,
+ index: i,
+ };
+ });
+ this.value.map((r) => {
+ this.leftArr[r.left].line = this.attachment(r.left, r.right);
+ this.leftArr[r.left].value = [r.right];
+ });
+ this.drawing();
+ });
+ },
+ // 瑙︽懜缁撴潫
+ touchend(e, item, index) {
+ console.log("鎶捣", e,item);
+ this.isDragging = false;
+ if (this.item.showAnswer) {
+ return false;
+ }
+ // let event = e.changedTouches[0];
+ // document.elementFromPoint 閲嶇偣锛屾牴鎹畑,y鍧愭爣 鍙栧綋鍓嶅厓绱� 鎵�鏈夎兘杩愯鐨勯�昏緫 閮戒緷鎵樹簬杩欓噷銆�
+ let dom = document.elementFromPoint(e.pageX, e.pageY);
+ // 鍙宠竟鐨刣om鏄摢涓�
+ let right = this.rightDom.find((r) => r.bom === dom);
+ // 涓嶇鏄摢涓兘娓呴櫎鎺� 搴曢儴鐨勭嚎
+ this.canvasB.clearRect(0, 0, this.clientWidth, this.clientHeight);
+ // 濡傛灉涓嶆槸鍙宠竟鐨刣om 鐩存帴鎶� 绾� 骞叉帀 -- 璇佹槑涓嶆槸 娌℃湁鎷栧埌鍙宠竟涓�
+ if (!right) {
+ item.line = [];
+ return;
+ }
+ // 濡傛灉宸叉湁鐨勪笉鏄垜鑷繁 鐩存帴鏇挎崲鎺変笂涓�涓殑
+ if (item.value[0] !== right.index) {
+ let model = this.leftArr.find((r) => r.value[0] === right.index);
+ if (model) {
+ model.value = [];
+ model.line = [];
+ }
+ item.value = [right.index];
+ }
+ // 閲嶆柊璧嬪�� 绾跨殑 x y 杞�
+ item.line = this.attachment(index, right.index);
+ this.drawing();
+ let model = this.leftArr
+ .map((r, i) => {
+ return {
+ left: i,
+ right: r.value[0],
+ };
+ })
+ .filter((r) => r.right !== undefined);
+ this.$emit("input", model);
+ this.item.userChoise = model;
+ console.log(JSON.stringify(model));
+ },
+ // 瑙︽懜寮�濮�
+ touchstart(e, item) {
+ this.isDragging = true;
+ console.log("鎸変笅", e);
+ this.checkItem = item
+ e.stopPropagation();
+ // let event = e.targetTouches[0];
+ item.line = [
+ e.pageX,
+ e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop,
+ ];
+ },
+ // // 瑙︽懜涓�
+ // touchmove(e, item) {
+ // if(!this.isDragging) return false
+ // console.log('绉诲姩',e);
+ // if (this.item.showAnswer) {
+ // return false;
+ // }
+ // // let event = e.targetTouches[0];
+ // item.line[2] = e.pageX;
+ // item.line[3] = e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
+ // this.backstrockline(item.line);
+ // },
+
+ // 绉诲姩涓�
+ mousemove(e) {
+ if (!this.isDragging) return false;
+ console.log("绉诲姩", e);
+ if (this.item.showAnswer) {
+ return false;
+ }
+ // let event = e.targetTouches[0];
+ this.checkItem.line[2] = e.pageX;
+ this.checkItem.line[3] =
+ e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
+ this.backstrockline(this.checkItem.line);
+ },
+
+ // 鎷栧姩鐨勬椂鍊欑敾绾�
+ backstrockline(val) {
+ let canvasB = this.canvasB;
+ canvasB.clearRect(0, 0, this.clientWidth, this.clientHeight);
+ canvasB.save();
+ canvasB.beginPath();
+ canvasB.lineWidth = 2;
+ canvasB.moveTo(val[0], val[1]);
+ canvasB.lineTo(val[2], val[3]);
+ canvasB.strokeStyle = "#0C6";
+ canvasB.stroke();
+ canvasB.restore();
+ },
+ // 娓叉煋鍑烘嫋鍔ㄤ箣鍚庣殑绾�
+ drawing() {
+ let canvasA = this.canvasA;
+ this.canvasA.clearRect(0, 0, this.clientWidth, this.clientHeight);
+ canvasA.beginPath();
+ canvasA.lineWidth = 2;
+ for (let i = 0; i < this.leftArr.length; i++) {
+ const line = this.leftArr[i].line;
+ console.log(line);
+ console.log(this.leftArr[i]);
+ if (line.length) {
+ canvasA.moveTo(line[0], line[1]);
+ canvasA.lineTo(line[2], line[3]);
+ }
+ }
+ canvasA.strokeStyle = "#0C6";
+ canvasA.stroke();
+ },
+ // 鏍规嵁 宸﹁竟 鍜屽彸杈圭殑 index,鎹㈢畻鍑� 宸﹀彸鐨刋,Y杞村潗鏍�
+ attachment(index, rightIndex) {
+ let leftEvent = this.leftDom[index].bom;
+ let rightEvent = this.rightDom[rightIndex].bom;
+ // 涓轰簡璁╃嚎閮藉湪涓棿 x杞翠笉鐢ㄦ敼 鏈�绠�鍗�
+ let leftX = leftEvent.clientWidth + leftEvent.offsetLeft;
+ let rightX = rightEvent.offsetLeft;
+ let leftY = leftEvent.offsetTop + leftEvent.clientHeight / 2;
+ let rightY = rightEvent.offsetTop + rightEvent.clientHeight / 2;
+ return [leftX, leftY, rightX, rightY];
+ },
+ mouseup() {
+ console.log("澶х洅瀛愭姮璧�", this.isDragging);
+ this.isDragging = false;
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.connect {
+ position: relative;
+ padding: 10px;
+
+ &-canvasA {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ z-index: 1;
+ }
+
+ &-canvasB {
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ z-index: 0;
+ }
+}
+
+.answer {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ &-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 40%;
+ text-align: center;
+
+ &-item {
+ z-index: 2;
+ // display: inline-flex;
+ padding: 10px;
+ border-radius: 4px;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ margin-bottom: 20px;
+ line-height: 40px;
+ padding: 20px 0;
+ }
+
+ &-item:last-child {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.connect {
+ -webkit-user-select: none; /* Safari */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* IE10+/Edge */
+ user-select: none; /* 鏍囧噯璇硶 */
+}
+</style>
--
Gitblit v1.9.1