From eeff64f494ed72d8acaa13d653c9f3ee181ac950 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期五, 07 六月 2024 16:09:46 +0800 Subject: [PATCH] 优化 --- src/books/lifeCare/view/chapter005.vue | 77 ++++----- src/books/lifeCare/view/chapter002.vue | 122 +++++++++------ src/books/lifeCare/index.vue | 85 ++++++---- src/books/childHealth/view/index.vue | 1 src/books/childHealth/view/content/index.vue | 150 ++++++++---------- 5 files changed, 223 insertions(+), 212 deletions(-) diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue index ccae517..60ef4ab 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 @@ -142,7 +142,7 @@ }, pageZoom() { return this.$store.state.qiankun.scale / 100; - } + }, }, watch: { showCatalogList: { @@ -153,7 +153,7 @@ ) { // 璋冪敤鐖跺眰鏂规硶 this.$store.state.qiankun.catalogChange({ - showCatalogList: newVal + showCatalogList: newVal, }); } // 鍚姩椤电爜瑙傚療 @@ -161,7 +161,7 @@ this.initObservation(); this.initThemeColor(); }, 500); - } + }, }, loadPageList: { handler(newVal, oldVal) { @@ -169,7 +169,7 @@ this.initSwiper(); this.initViewer(); }, 200); - } + }, }, pageZoom: { handler(newVal, oldVal) { @@ -177,8 +177,8 @@ this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; - } - } + }, + }, }, mounted() { // 榛樿鍔犺浇绔犺妭 @@ -213,7 +213,7 @@ // 璺宠浆妫�绱㈢粨鏋滀綅缃� jumpSearchItem: (data) => { this.searchItemLocation(data); - } + }, }); } @@ -222,13 +222,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锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� }); // 鍚姩椤电爜瑙傚療 @@ -239,34 +239,34 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { - // this.gotoPage(1, 10); - // setTimeout(() => { - // this.renderSign("Highlight", { - // id: "2ACA9359", - // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", - // page: "10", - // type: "Highlight", - // color: "#F5E12A" - // }); - // setTimeout(() => { - // this.delSign({ - // ids: ["2ACA9359"] - // }); - // }, 2000); - // }, 5000); + // this.gotoPage(1, 10); + // setTimeout(() => { + // this.renderSign("Highlight", { + // id: "2ACA9359", + // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", + // page: "10", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); + // }, 5000); - // const pageDom = (this.container ? this.container : document) - // .querySelector("#app") - // .querySelectorAll(".page-box"); - // 妫�绱� - // console.log(this.searchTextByPage("鍎跨"), "searchTextByPage"); - // 妫�绱㈣烦杞� - // this.searchItemLocation({ - // catalog: 2, - // page: 10, - // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", - // txtIndex: 57 - // }); + // const pageDom = (this.container ? this.container : document) + // .querySelector("#app") + // .querySelectorAll(".page-box"); + // 妫�绱� + // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage"); + // 妫�绱㈣烦杞� + // this.searchItemLocation({ + // catalog: 2, + // page: 10, + // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", + // txtIndex: 57 + // }); // }, 5000); }, methods: { @@ -339,7 +339,7 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, - this.catalogLength + this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; @@ -389,10 +389,7 @@ this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� - const treeWalker = document.createTreeWalker( - pageDom, - NodeFilter.SHOW_TEXT - ); + const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { @@ -598,7 +595,7 @@ this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, - text + text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� @@ -619,27 +616,22 @@ ); const catalog = catalogDom.getAttribute("num"); if (!this.questionDataMap[page]) { - const token = localStorage.getItem(this.config.tokenKey) if (testData && testData[catalog]) { if (testData[catalog][page]) { if (Array.isArray(testData[catalog][page])) { - if(token) { - this.questionDataMap[page] = await getQuestionList( - page, - testData[catalog][page], - this.config.activeBook - ); - } + this.questionDataMap[page] = await getQuestionList( + page, + testData[catalog][page], + this.config.activeBook + ); } else { const obj = {}; for (let key in testData[catalog][page]) { - if(token) { - obj[key] = await getQuestionList( - [], - testData[catalog][page][key], - this.config.activeBook - ); - } + obj[key] = await getQuestionList( + [], + testData[catalog][page][key], + this.config.activeBook + ); } this.questionDataMap[page] = obj; } @@ -662,10 +654,7 @@ // 楂樹寒琛� setTimeout(() => { // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 - const pageTextList = document.createTreeWalker( - target, - NodeFilter.SHOW_TEXT - ); + const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT); // 鍖归厤鍏抽敭瀛� const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); @@ -709,7 +698,7 @@ autoplay: { //鑷姩寮�濮� delay: 3000, //鏃堕棿闂撮殧 - disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* + disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠* }, paginationClickable: true, slidesPerView: 1, // 涓�缁勪笁涓� @@ -721,11 +710,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( @@ -753,7 +742,7 @@ ), prevEl: (this.container ? this.container : document).querySelector( ".swiper-button-prev" - ) + ), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� observer: true, @@ -772,8 +761,8 @@ var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; - } - } + }, + }, }); } }, @@ -789,7 +778,7 @@ : "body", navbar: true, // 鏄剧ず瀵艰埅鏍� toolbar: true, // 鏄剧ず宸ュ叿鏍� - title: true // 鏄剧ず鏍囬 + title: true, // 鏄剧ず鏍囬 }); } }, @@ -812,7 +801,7 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen + chapterThirteen, }; // 閬嶅巻鎵�鏈夌珷鑺傛枃浠� for (const key in pageData) { @@ -823,8 +812,8 @@ pageExample = new pageComponent({ propsData: { showPageList: [], - questionData: {} - } + questionData: {}, + }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( @@ -854,8 +843,8 @@ pageExample = new pageComponent({ propsData: { showPageList: [pageNum], - questionData: {} - } + questionData: {}, + }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( @@ -868,10 +857,7 @@ .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 - const pageTextList = document.createTreeWalker( - thisPageDom, - NodeFilter.SHOW_TEXT - ); + const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT); // 鍖归厤鍏抽敭瀛� const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); @@ -888,7 +874,7 @@ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, - txtIndex: txtIndex + txtIndex: txtIndex, }); } } @@ -911,7 +897,7 @@ this.highlightData = data; // 璺宠浆 this.gotoPage(data.catalog, data.page, () => {}); - } + }, }, components: { pageHeader, @@ -927,8 +913,8 @@ chapterTen, chapterEleven, chapterTwelve, - chapterThirteen - } + chapterThirteen, + }, }; </script> diff --git a/src/books/childHealth/view/index.vue b/src/books/childHealth/view/index.vue index d96b1af..342cbde 100644 --- a/src/books/childHealth/view/index.vue +++ b/src/books/childHealth/view/index.vue @@ -24,6 +24,7 @@ } } }, + handleMouseUp(e) { const selection = ( this.container ? this.container : window diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index 257a80b..57b0dc2 100644 --- a/src/books/lifeCare/index.vue +++ b/src/books/lifeCare/index.vue @@ -20,44 +20,44 @@ <ChapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <ChapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <ChapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <ChapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <ChapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" @Upload_initViewer="changeDomViewer" :isSearch="isSearch" /> <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" @eventSwdt="swdtChange" @Upload_initViewer="changeDomViewer" :isSearch="isSearch" @@ -65,13 +65,13 @@ <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList" - :questionData="questionData" + :questionData="questionDataMap" :isSearch="isSearch" /> <chapter010 @@ -202,8 +202,8 @@ }, }, mounted() { - // 榛樿鍔犺浇绔犺妭 - this.showCatalogList = [1]; + // 榛樿鍔犺浇绔犺妭 + this.showCatalogList = [6]; // 婊氬姩鐩戝惉鑺傛祦 this.throttledScrollHandler = _.throttle( this.scrollFun, @@ -283,6 +283,7 @@ this.initViewer(); }, 500); }, + // 婊氬姩鐩戝惉 scrollFun(event) { // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 @@ -361,6 +362,12 @@ // 澶勭悊鏍囪鏁版嵁 handelSignData(type, data) { + if (this.loadPageList.indexOf(Number(data.page)) > -1) { + // 绔嬪嵆娓叉煋 + this.renderSign(type, data); + } + + // 鍌ㄥ瓨鏁版嵁 if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; @@ -369,6 +376,10 @@ // 娓叉煋鏍囪 renderSign(type, data) { + // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌� + if (this.$store.state.qiankun.disableSign) { + return false; + } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`); @@ -422,6 +433,7 @@ } } }, + // 鍒犻櫎鏍囪娓叉煋 delSign({ ids, type }) { if (ids && ids.length) { @@ -559,15 +571,6 @@ }); }, - getParentWithClass(element, className) { - while (element.parentElement) { - element = element.parentElement; - if (element.classList.contains(className)) { - return element; - } - } - }, - pageChangeCallback(entries, observer) { //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°�� entries.forEach((entry) => { @@ -612,14 +615,17 @@ ); const catalog = catalogDom.getAttribute("num"); if (!this.questionDataMap[page]) { + const token = localStorage.getItem(this.config.tokenKey); if (testData && testData[catalog]) { if (testData[catalog][page]) { if (Array.isArray(testData[catalog][page])) { - this.questionDataMap[page] = await getQuestionList( - page, - testData[catalog][page], - this.config.activeBook - ); + if (token) { + this.questionDataMap[page] = await getQuestionList( + page, + testData[catalog][page], + this.config.activeBook + ); + } } else { const obj = {}; for (let key in testData[catalog][page]) { @@ -631,7 +637,7 @@ } this.questionDataMap[page] = obj; } - // console.log("棰樼洰", this.questionDataMap); + console.log("棰樼洰", this.questionDataMap); } } } @@ -650,7 +656,10 @@ // 楂樹寒琛� setTimeout(() => { // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣 - const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT); + const pageTextList = document.createTreeWalker( + target, + NodeFilter.SHOW_TEXT + ); // 鍖归厤鍏抽敭瀛� const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); @@ -781,6 +790,16 @@ } }, + getParentWithClass(element, className) { + // console.log(element, className, "element, className"); + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + handleMouseUp(e) { const selection = ( this.container ? this.container : window @@ -821,14 +840,6 @@ y: e.y, }); } - } - }, - - swdtChange(data) { - if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { - this.$store.state.qiankun.chooseWords({ - type: data, - }); } }, @@ -946,10 +957,10 @@ } } // 杈撳嚭鎼滅储缁撴灉 - console.log(searchResult); + // console.log(searchResult); return searchResult; }, - + // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒 searchItemLocation(data) { // 璁板綍楂樹寒淇℃伅 diff --git a/src/books/lifeCare/view/chapter002.vue b/src/books/lifeCare/view/chapter002.vue index bd24f43..b76cf27 100644 --- a/src/books/lifeCare/view/chapter002.vue +++ b/src/books/lifeCare/view/chapter002.vue @@ -1,3 +1,4 @@ +<!-- eslint-disable no-irregular-whitespace --> <template> <div class="chapter" num="3"> <div class="page-box" page="19"> @@ -426,8 +427,8 @@ index == 0 || index == chapter002.headersData.length - 2 || index == chapter002.headersData.length - 1 - ? '100px' - : '', + ? '120px' + : '40px', }" v-for="(header, index) in chapter002.headersData" :key="index" @@ -443,23 +444,20 @@ > <td v-for="(cell, cellIndex) in row" :key="cellIndex"> <template v-if="cell === ''"> - <input - type="text" - v-model="chapter002.tableData121[rowIndex][cellIndex]" - @blur=" - updateCell(rowIndex, cellIndex, $event.target.value) - " - /> + <div + contenteditable + @blur="updateCell(rowIndex, cellIndex, $event)" + > + {{ chapter002.tableData121[rowIndex][cellIndex] }} + </div> </template> <template v-else> - <input - :readonly="cellIndex == 0" - type="text" - :value="chapter002.tableData121[rowIndex][cellIndex]" - @blur=" - updateCell(rowIndex, cellIndex, $event.target.value) - " - /> + <div + :contenteditable="cellIndex != 0" + @blur="updateCell(rowIndex, cellIndex, $event)" + > + {{ chapter002.tableData121[rowIndex][cellIndex] }} + </div> </template> </td> </tr> @@ -767,8 +765,8 @@ <table class="table111 table122"> <thead> <tr> - <th rowspan="3">鏃ユ湡</th> - <th rowspan="3">濮撳悕</th> + <th rowspan="3" style="width: 55px">鏃ユ湡</th> + <th rowspan="3" style="width: 55px">濮撳悕</th> <th colspan="3">鏅ㄩ棿妫�鏌ユ儏鍐�</th> <th colspan="8">鍏ㄦ棩瑙傚療鎯呭喌</th> <th colspan="2">浜ょ彮</th> @@ -801,22 +799,20 @@ > <td v-for="(cell, cellIndex) in row" :key="cellIndex"> <template v-if="cell === ''"> - <input - type="text" - :value="chapter002.tableData122[rowIndex][cellIndex]" - @blur=" - updateCell122(rowIndex, cellIndex, $event.target.value) - " - /> + <div + contenteditable + @blur="updateCell122(rowIndex, cellIndex, $event)" + > + {{ chapter002.tableData122[rowIndex][cellIndex] }} + </div> </template> <template v-else> - <input - type="text" - :value="chapter002.tableData122[rowIndex][cellIndex]" - @blur=" - updateCell122(rowIndex, cellIndex, $event.target.value) - " - /> + <div + contenteditable + @blur="updateCell122(rowIndex, cellIndex, $event)" + > + {{ chapter002.tableData122[rowIndex][cellIndex] }} + </div> </template> </td> </tr> @@ -893,22 +889,24 @@ > <td v-for="(cell, cellIndex) in row" :key="cellIndex"> <template v-if="cell === ''"> - <input - type="text" - v-model="chapter002.tableData123[rowIndex][cellIndex]" + <div + contenteditable @blur=" updateCell123(rowIndex, cellIndex, $event.target.value) " - /> + > + {{ chapter002.tableData123[rowIndex][cellIndex] }} + </div> </template> <template v-else> - <input - type="text" - :value="cell" + <div + contenteditable @blur=" updateCell123(rowIndex, cellIndex, $event.target.value) " - /> + > + {{ cell }} + </div> </template> </td> </tr> @@ -1693,24 +1691,40 @@ this.chapter002.isInspectOpen = !this.chapter002.isInspectOpen; localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, - updateCell(rowIndex, cellIndex, value) { + updateCell(rowIndex, cellIndex, e) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.tableData121[rowIndex], cellIndex, value); + this.$set( + this.chapter002.tableData121[rowIndex], + cellIndex, + e.target.innerText + ); localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, - updateCell122(rowIndex, cellIndex, value) { + updateCell122(rowIndex, cellIndex, e) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.tableData122[rowIndex], cellIndex, value); + this.$set( + this.chapter002.tableData122[rowIndex], + cellIndex, + e.target.innerText + ); localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, - updateCell123(rowIndex, cellIndex, value) { + updateCell123(rowIndex, cellIndex, e) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.tableData123[rowIndex], cellIndex, value); + this.$set( + this.chapter002.tableData123[rowIndex], + cellIndex, + e.target.innerText + ); localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, updateCellGroup(rowIndex, cellIndex, value) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.groupData[rowIndex], cellIndex, value); + this.$set( + this.chapter002.groupData[rowIndex], + cellIndex, + value + ); if (cellIndex == 4) { this.$set( this.chapter002.groupData[rowIndex], @@ -1723,7 +1737,11 @@ }, updateCellDesign(rowIndex, cellIndex, value) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.designData[rowIndex], cellIndex, value); + this.$set( + this.chapter002.designData[rowIndex], + cellIndex, + value + ); if (cellIndex == 4) { this.$set( this.chapter002.designData[rowIndex], @@ -1736,7 +1754,11 @@ }, updateCellInspect(rowIndex, cellIndex, value) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter002.inspectData[rowIndex], cellIndex, value); + this.$set( + this.chapter002.inspectData[rowIndex], + cellIndex, + value + ); if (cellIndex == 4) { this.$set( this.chapter002.inspectData[rowIndex], diff --git a/src/books/lifeCare/view/chapter005.vue b/src/books/lifeCare/view/chapter005.vue index 5361ced..44c2af2 100644 --- a/src/books/lifeCare/view/chapter005.vue +++ b/src/books/lifeCare/view/chapter005.vue @@ -191,8 +191,8 @@ :style="{ width: index == 0 || - index == chapter005.tableData151.length - 1 - ? '100px' + index == chapter005.headersData.length - 1 + ? '150px' : '', }" v-for="(header, index) in chapter005.headersData" @@ -209,23 +209,20 @@ > <td v-for="(cell, cellIndex) in row" :key="cellIndex"> <template v-if="cell === ''"> - <input - type="text" - v-model="chapter005.tableData151[rowIndex][cellIndex]" - @blur=" - updateCell(rowIndex, cellIndex, $event.target.value) - " - /> + <div + contenteditable + @blur="updateCell(rowIndex, cellIndex, $event)" + > + {{ chapter005.tableData151[rowIndex][cellIndex] }} + </div> </template> <template v-else> - <input - :readonly="cellIndex == 0" - type="text" - :value="chapter005.tableData151[rowIndex][cellIndex]" - @blur=" - updateCell(rowIndex, cellIndex, $event.target.value) - " - /> + <div + :contenteditable="cellIndex != 0" + @blur="updateCell(rowIndex, cellIndex, $event)" + > + {{ chapter005.tableData151[rowIndex][cellIndex] }} + </div> </template> </td> </tr> @@ -1475,30 +1472,20 @@ > <td v-for="(cell, cellIndex) in row" :key="cellIndex"> <template v-if="cell === ''"> - <input - type="text" - v-model="chapter005.tableData155[rowIndex][cellIndex]" - @blur=" - updateCell155( - rowIndex, - cellIndex, - $event.target.value - ) - " - /> + <div + contenteditable + @blur="updateCell155(rowIndex, cellIndex, $event)" + > + {{ chapter005.tableData155[rowIndex][cellIndex] }} + </div> </template> <template v-else> - <input - type="text" - :value="chapter005.tableData155[rowIndex][cellIndex]" - @blur=" - updateCell155( - rowIndex, - cellIndex, - $event.target.value - ) - " - /> + <div + contenteditable + @blur="updateCell155(rowIndex, cellIndex, $event)" + > + {{ chapter005.tableData155[rowIndex][cellIndex] }} + </div> </template> </td> </tr> @@ -3665,9 +3652,9 @@ } localStorage.setItem("chapter005", JSON.stringify(this.chapter005)); }, - updateCell(rowIndex, cellIndex, value) { + updateCell(rowIndex, cellIndex, e) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter005.tableData151[rowIndex], cellIndex, value); + this.$set(this.chapter005.tableData151[rowIndex], cellIndex, e.target.innerText); localStorage.setItem("chapter005", JSON.stringify(this.chapter005)); }, updateCell152(rowIndex, cellIndex, value) { @@ -3685,9 +3672,13 @@ this.$set(this.chapter005.tableData154[rowIndex], cellIndex, value); localStorage.setItem("chapter005", JSON.stringify(this.chapter005)); }, - updateCell155(rowIndex, cellIndex, value) { + updateCell155(rowIndex, cellIndex, e) { // 鏇存柊鍗曞厓鏍兼暟鎹� - this.$set(this.chapter005.tableData155[rowIndex], cellIndex, value); + this.$set( + this.chapter005.tableData155[rowIndex], + cellIndex, + e.target.innerText + ); localStorage.setItem("chapter005", JSON.stringify(this.chapter005)); }, updateCell156(rowIndex, cellIndex, value) { -- Gitblit v1.9.1