From 728a339da5ece71917bc8873701a9b156ad3e4e1 Mon Sep 17 00:00:00 2001 From: zyronon Date: Sun, 3 Sep 2023 02:25:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=BB=98=E5=86=99=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/components/TypeArticle.vue | 103 ++++++++++++++++++++++++--------- 2 files changed, 75 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index ccdc2efa..fce0a933 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "@icon-park/vue-next": "^1.4.2", "element-plus": "^2.3.9", "hover.css": "^2.3.2", - "jquery": "^3.7.1", "localforage": "^1.10.0", "lodash": "^4.17.21", "mitt": "^3.0.1", diff --git a/src/components/TypeArticle.vue b/src/components/TypeArticle.vue index 7b8e9b39..aaf31d42 100644 --- a/src/components/TypeArticle.vue +++ b/src/components/TypeArticle.vue @@ -15,6 +15,7 @@ import beep from '../assets/sound/beep.wav' import correct from '../assets/sound/correct.wav' import {useSound} from "@/hooks/useSound.ts" import {CnKeyboardMap, useSplitArticle} from "@/hooks/useSplitArticle"; +import {$computed} from "vue/macros"; let article1 = `How does the older investor differ in his approach to investment from the younger investor? There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that? @@ -85,24 +86,30 @@ onMounted(() => { }) article.sections = t1 console.log(cloneDeep(article)) - nextTick(() => { - let articleRect = articleWrapperRef.getBoundingClientRect() - article.translate.map(v => { - let wordClassName = `.word${v.location}` - let translateClassName = `.translate${v.location}` - let word = document.querySelector(wordClassName) - let translate: HTMLDivElement = document.querySelector(translateClassName) - let rect = word.getBoundingClientRect() - - translate.style.top = rect.top - articleRect.top - 20 + 'px' - translate.firstChild.style.width = rect.left - articleRect.left + 'px' - // console.log(word, rect.left - articleRect.left) - // console.log('word-rect', rect) - }) - }) - + calcTranslateLocation() }) +function calcTranslateLocation() { + nextTick(() => { + setTimeout(() => { + let articleRect = articleWrapperRef.getBoundingClientRect() + article.translate.map(v => { + let wordClassName = `.word${v.location}` + let translateClassName = `.translate${v.location}` + let word = document.querySelector(wordClassName) + let translate: HTMLDivElement = document.querySelector(translateClassName) + let rect = word.getBoundingClientRect() + + translate.style.opacity = '1' + translate.style.top = rect.top - articleRect.top - 20 + 'px' + translate.firstChild.style.width = rect.left - articleRect.left + 'px' + // console.log(word, rect.left - articleRect.left) + // console.log('word-rect', rect) + }) + }, 500) + }) +} + function play() { return playAudio(article1) if (isPlay) { @@ -125,12 +132,12 @@ function focus() { let sectionIndex = $ref(0) let sentenceIndex = $ref(0) -let wordIndex = $ref(0) +let wordIndex = $ref(6) let index = $ref(0) let input = $ref('') let wrong = $ref('') let isSpace = $ref(false) -let isD = $ref(false) +let isDictation = $ref(true) const currentIndex = computed(() => { return `${sectionIndex}${sentenceIndex}${wordIndex}` @@ -158,6 +165,9 @@ function keyDown(e: KeyboardEvent) { sentenceIndex = 0 sectionIndex++ } else { + if (isDictation) { + calcTranslateLocation() + } playAudio(currentSection[sentenceIndex].sentence) } } @@ -234,6 +244,33 @@ function keyDown(e: KeyboardEvent) { function playWord(word: string) { playAudio(word) } + +function currentWordInput(word: string) { + if (isDictation) { + return ' ' + } + return word.slice(input.length + wrong.length, input.length + wrong.length + 1) +} + +function currentWordEnd(word: string) { + let str = word.slice(input.length + wrong.length + 1) + if (isDictation) { + return str.split('').map(v => '_').join('') + } + return str +} + +function otherWord(word: string, i: number, i2: number, i3: number) { + let str = word + + //剩100是因为，可能存在特殊情况，比如003,010这种，0 12 24，100 + if (sectionIndex * 10000 + sentenceIndex * 100 + wordIndex < i * 10000 + i2 * 100 + i3 + && isDictation + ) { + return str.split('').map(v => '_').join('') + } + return str +}