代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum=1.0, user-scalable=no shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>航管英语</title>
<link rel="stylesheet" href="./css/base.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> -->
<link href="/tailwind.css" rel="stylesheet">
<link rel="stylesheet" href="./iconFont/iconfont.css">
<link rel="stylesheet" href="./bootstrap-icons-1.10.5/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
<script async src="https://hm.baidu.com/hm.js?85fad12bb9a6dab448f4eff0a19299a5"></script>
<script src="./js/crypto-js.min.js"></script>
<script src="./js/voice.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/index.js"></script>
<script src="./axios.min.js"></script>
<script type="text/javascript" src="./dist/recorder.js"></script>
</head>
<style>
@font-face{
font-family: Baskerville;
src: url("./font/Baskerville.ttc");
}
@media screen and (max-width: 800px) {
.content {
height: 380px;
}
}
@media screen and (min-width: 810px) {
.content {
height: 600px;
}
}
</style>
<body>
<div class="msg-box" id="app" >
<div class="bg-box" v-if="startPageShow"></div>
<div class="bg-box-1" v-if="sceneSelectShow"></div>
<div class="bg-box-2" v-if="trainShow"></div>
<!-- 登入页面 -->
<div class="login-page" v-if="loginPageshow">
<span class="guide-tip">请输入16位产品密钥</span>
<div class="inputs">
<div v-for="(item,index) in inputList">
<input type="text" v-model="item.val" class="border-input" @paste="onPaste" @keyup="nextFocus($event,index)"
@keydown="changeValue(index)">
</div>
</div>
<span class="error-tip" v-if="loginTip">密钥输入错误</span>
<div class="loginBtnBox" v-if="loginBtnShow">
<button type="button" class="btn btn-primary" @click="login">提交</button>
</div>
</div>
<!-- 开始页面 -->
<div class="startview" v-if="startPageShow">
<p class="title">航管英语训练</p>
<div class="begin-show-btn">
<button type="button" class="btn btn-outline-secondary" @click="goToSelect">开始练习</button>
</div>
</div>
<!-- 模块入口 -->
<transition name="fade">
<div class="sceneSelectView" v-if="sceneSelectShow">
<img src="./img/star.svg" alt="" class="sceneSelectView-bg">
<div class="sceneSelectView-btn">
<button type="button" class="btn btn-outline-dark" @click="gotoTrain('1')">词汇练习</button>
<button type="button" class="btn btn-outline-dark" @click="gotoTrain('2')">例句练习</button>
<button type="button" class="btn btn-outline-dark" @click="gotoTrain('3')">完整对话</button>
</div>
</div>
</transition>
<!-- 训练页面 -->
<div class="trainView" v-if="trainShow">
<!-- 底部图片区域 -->
<img src="./img/one.svg" alt="" class="one">
<img src="./img/two.svg" alt="" class="two">
<!-- <img src="./img//three.svg" alt="" class="three"> -->
<!-- Tab区域 -->
<div class="tabBar" :class="[isDisabled ?'stopClick':'']">
<div class="tabBar-item-left">
<button class="tabBar-item" :class="[(curIndex == item.id )?'active':'']" aria-current="page" href="#" v-for="item in chapterList" :key="item.id" @click="changeChaper(item.id)">{{item.name}}</button>
</div>
<div class="back">
<button class="tabBar-item" @click="back">退出</button>
</div>
</div>
<!-- 单词/语句区域 -->
<div class="content" :class="[isDisabled ?'stopClick':'']">
<div class="content-panel">
<div class="params" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="This top tooltip is themed via CSS variables." :class="[type == '1' ? 'baseStyle' : 'devStyle']" @click="playVoice">{{content}}</div>
<!-- 语音播放方案暂时屏蔽 -->
<div class="main-control" v-if="beginPlay">
<i class="bi bi-play-circle" @click="playVoice"></i>
</div>
<div class="main-control" v-if="playing">
<i class="bi bi-pause-circle"></i>
</div>
<div class="voiceRecoBtn" v-if="!reconaging" @click="beginSpeack">
<i class="bi bi-mic-fill voice-icon"></i>
</div>
<div class="vue-box" v-if="reconaging" @click="resetStatus">
正在识别,请说话
</div>
<div class="vue-box">
{{message}}
</div>
</div>
</div>
<div class="iframebox">
<!-- <iframe src="https://www.xiaohui.ac.cn/iframeBox/dist/view/index.html" id='detailedIframe' allow='microphone;camera;'></iframe> -->
<iframe src="./iframeBox/dist/view/index.html" id='detailedIframe' allow='microphone;camera;'></iframe>
</div>
<div class="score-box">
<div class="item-score">
<div>{{accuracy}}</div>
<div>{{fluency}}</div>
<div>{{integrity}}</div>
</div>
<!-- <div class="total-score"><span class="total-score-child">{{totalScore}}</span></div> -->
</div>
<div class="mainVideo">
<audio controls :src="voiceUrl" ref="audio"></audio>
</div>
<div class="prev-next-btn">
<div class="next-content" v-if="curPositionIndex >= 1" @click="gotoPrev" :class="[isDisabled ?'stopClick':'']">
上一个
</div>
<div class="next-content" @click="gotoNext" :class="[isDisabled ?'stopClick':'']">
下一个
</div>
</div>
</div>
<!-- 完整对话区域 -->
<div class="fullDialogueView" :class="[isDisabled ?'stopClick':'']" v-if="fullDialogueShow">
<div class="control-back-btn">
<div class="tabBar">
<div class="tabBar-item-left">
<button class="tabBar-item" :class="[(curTotalIndex == item.id )?'active':'']" aria-current="page" href="#" v-for="item in chapterTotalList" :key="item.id" @click="changeTotalChaper(item.id)">{{item.name}}</button>
</div>
<div class="back">
<button class="tabBar-item" @click="back">退出</button>
</div>
</div>
</div>
<div class="conversation" ref="fatherBox">
<div class="dia-left" v-for="(item,index) in DialogueList" :class="[index % 2 == 0 ?'isLeftBox':'isRightBox']" :key="index">
<div class="leftDialogue" :class="[index % 2 == 0 ?'isLeft':'isRight']">{{item}}</div>
</div>
</div>
<div class="speackBar">
<div class="dialogue-btn" @click="dialogueBegin">{{dialogueBtnName}}</div>
</div>
</div>
</div>
<script>
const BASEURL = "https://www.xiaohui.ac.cn/speech/api"
// const BASEURL = "http://localhost:3000/api"
var app = new Vue({
el:"#app",
data:{
message:'',
voice:'',
speack:false,
voiceData: typeof speechSynthesis !== "undefined" && speechSynthesis.getVoices(),
loginPageshow:true,
startPageShow:false,
sceneSelectShow:false,
trainShow:false,
fullDialogueShow:false,
curIndex:'1',//章节状态
type:'1',//练习状态
curTotalIndex:'1',//完整对话章节
chapterListBase:[{id:1,name:'第一章'},{id:2,name:'第二章'},{id:3,name:'第三章'},{id:4,name:'第四章'},{id:5,name:'第五章'},{id:6,name:'第六章'},{id:7,name:'第七章'},{id:8,name:'第八章'}],
chapterListDev:[{id:1,name:'第一课'},{id:2,name:'第二课'},{id:3,name:'第三课'},{id:4,name:'第四课'},{id:5,name:'第五课'},{id:6,name:'第六课'},{id:7,name:'第七课'},{id:8,name:'第八课'},{id:9,name:'第九课'},{id:10,name:'第十课'}],
chapterTotalList:[{id:1,name:'第一章'},{id:2,name:'第二章'}],
contentObj:'',
curPositionIndex:0,//第几个章节
content:'',
totalListdata:[],
url:'',
playing:false,
beginPlay:false,
reconaging:false,
dialogueBtnName:'开始说话',
dialogueCount:0,
DialogueList:[],
rightDialogueList:[],
cDialougueList:[],
pDialougueList:[],
finishDialogue:false,
timer:'',
isDisabled:false,
accuracy:'',
fluency:'',
integrity:'',
totalScore:'',
loginKeyBox:[],
loginKeyStr:'',
numberCount:0,
loginBtnShow:false,
loginTip:false,
defaults:{
origin: { y: 0.7 }
},
inputList: [{val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}, {val: ""}],
},
watch:{
inputList:{
handler: function (newVal, oldVal) {
newVal[0].val = newVal[0].val[0]
this.loginKeyStr = newVal.map(item => item.val).join('')
console.log("xxxxx",this.loginKeyStr);
console.log("xxxxxsss",oldVal);
this.loginKeyBox = newVal.map(item => Boolean(item.val) == true)
this.numberCount = this.loginKeyBox.filter(item => item == true).length
if(this.numberCount == 16){
this.loginBtnShow = true
// 在这里调用方法请求后端
// this.login()
}else{
this.loginBtnShow = false
}
},
deep: true,
immediate: false
},
},
computed:{
chapterList(){
return this.type == '1' ? this.chapterListBase : this.chapterListDev
},
voiceUrl(){
return this.type == "1" ? `https://mycos.oss-cn-shenzhen.aliyuncs.com/voice/${this.content}.mp3` : `https://mycos.oss-cn-shenzhen.aliyuncs.com/voice/page-${this.curIndex}/A${this.curPositionIndex + 1}.mp3`
}
},
created(){
this.speakMain()
},
mounted(){
const keyValue = localStorage.getItem('key')
console.log("登入密钥打印",keyValue);
if(keyValue){
this.loginPageshow = false
this.startPageShow = true
}else{
this.loginPageshow = true
this.startPageShow = false
}
window.addEventListener('message', (ev) => {
const data = ev.data || null;
this.speechScore(data);
}, false);
let timer = setInterval(() => {
if(!this.voiceData.length) {
//获取语言包
this.voiceData = speechSynthesis.getVoices();
// console.log('语言包打印',this.voiceData);
} else {
clearInterval(timer);
}
}, 500);
},
methods:{
fire(particleRatio, opts) {
confetti(Object.assign({}, this.defaults, opts, {
particleCount: Math.floor(200 * particleRatio)
}));
},
/*对焦到下一个input框去*/
nextFocus(el,index) {
var dom = document.getElementsByClassName("border-input"),
currInput = dom[index],
nextInput = dom[index + 1],
lastInput = dom[index - 1];
/*这里的keyCode 根据不同的平台或许不同,安卓就是不是8*/
if (el.keyCode != 8) {
if (index < (this.inputList.length - 1)) {
nextInput.focus();
} else {
currInput.blur();
}
}else{
if (index !=0) {
lastInput.focus();
}
}
},
/*当键盘按下的时候清空原有的数*/
changeValue(index) {
this.inputList[index].val = "";
},
onPaste(event) {
const pastedText = event.clipboardData.getData('text');
for(let i = 0; i < this.inputList.length; i++){
this.inputList[i].val = pastedText[i]
}
// this.inputList[0].val = ''
console.log(`Pasted text: ${pastedText}`,this.inputList[0].val);
},
async login(){
const params = {onlyKey:this.loginKeyStr}
const res = await axios.post(`${BASEURL}/pcLogin`,params)
console.log("登入打印",res);
if(res.data.code == 0){
this.loginTip = false
// 本地存储数据
localStorage.setItem('key', JSON.stringify(this.loginKeyStr))
// 播放烟花特效
this.fireWork()
setTimeout(() => {
this.loginPageshow = false
this.startPageShow = true
}, 1500);
}else{
this.loginTip = true
}
},
fireWork(){
this.fire(0.25, {
spread: 26,
startVelocity: 55,
});
this.fire(0.2, {
spread: 60,
});
this.fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
this.fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
this.fire(0.1, {
spread: 120,
startVelocity: 45,
});
},
// 评分模块
speechScore(data){
console.log("点了就会执行",data);
if(data.score){
this.isDisabled = true
}
// console.log("获取子组件评分数据",data);
const score = data.score
// 在这里拼接成一个长字符串,然后添加到DOM
const scoreTextFirst = '准确度分:' + Number(score.accuracy_score).toFixed(2)
const scoreTextSecond = '流畅度分:' + Number(score.fluency_score).toFixed(2)
const scoreTextThird = '完整度分:' + Number(score.integrity_score).toFixed(2)
const scoreTextFour = '总分:' + Number(score.total_score).toFixed(2)
// console.log("评分打印",scoreTextFirst);
let p1 = new Promise((resolve,reject)=>{
this.timer = null
let flagCount = 0
// console.log("第一个顺序调用");
let typewritingText = scoreTextFirst.split('')
this.accuracy = typewritingText[0]
let _this = this
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
clearInterval(_this.timer)
resolve()
}
_this.accuracy = _this.accuracy + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
})
}, 100);
})
let p2 = p1.then((res)=>{
return new Promise((resolve,reject)=>{
let flagCount = 0
let typewritingText = scoreTextSecond.split('')
this.fluency = typewritingText[0]
let _this = this
this.timer = null
// console.log("第二个顺序调用");
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
clearInterval(_this.timer)
resolve()
}
_this.fluency = _this.fluency + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
})
}, 100);
})
})
let p3 = p2.then((res)=>{
return new Promise((resolve,reject)=>{
let flagCount = 0
let typewritingText = scoreTextThird.split('')
this.integrity = typewritingText[0]
let _this = this
this.timer = null
// console.log("第三个顺序调用");
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
clearInterval(_this.timer)
resolve()
}
_this.integrity = _this.integrity + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
})
}, 100);
})
})
let p4 = p3.then((res)=>{
return new Promise((resolve,reject)=>{
let flagCount = 0
let typewritingText = scoreTextFour.split('')
this.totalScore = typewritingText[0]
let _this = this
this.timer = null
// console.log("第四个顺序调用");
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
this.isDisabled = false
clearInterval(_this.timer)
resolve()
}
_this.totalScore = _this.totalScore + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
})
}, 100);
})
})
},
// 重置评分数据
resetScore(){
this.accuracy = ''
this.fluency = ''
this.integrity = ''
this.totalScore = ''
},
// 停止语音识别
resetStatus(){
this.sendPostMessage()
this.reconaging = false
this.speack = false
// this.message = '正在识别,请说话'
this.voice.stop()
console.log("hhhhhhhhh");
},
// 重置识别状态
resetSpeech(){
this.reconaging = false
this.message = ''
},
// 开始语音识别
beginSpeack(){
// 开始和结束用于语音识别后文字的显示
// 组件通信用于传递语音识别的数据以及是否开始进行打分
this.message = ''
// 在这里触发子组件
this.sendPostMessage()
this.speack = true
console.log("语音识别状态打印bbbbbb",this.speack);
if(this.speack){
this.voice.start()
this.message = ''
}
this.reconaging = !this.reconaging
console.log("我要开始说话了");
},
// 返回
back(){
this.trainShow = false
this.fullDialogueShow = false
this.sceneSelectShow = true
},
// 向子组件发送评分请求
sendPostMessage(){
let ifr = document.getElementById('detailedIframe').contentWindow;
ifr.postMessage({ msg: "点击到了" })
},
// 开始播放录音
async playVoice(){
const params = {"fileName":'request.mp3'}
const res = await axios.post(`${BASEURL}/getPlayVoice`,params,{responseType: 'blob'})
const url = window.URL.createObjectURL(res.data)
this.url = url
this.$refs['audio'].play();
},
// 前往章节选择页面
goToSelect(){
this.startPageShow = false
this.sceneSelectShow = true
},
// 前往训练页面
gotoTrain(type){
this.startPageShow = false
this.sceneSelectShow = false
this.type = type
if(this.type == 3){
this.getFullDialougueData('3')
return
}
// 调用接口读取指定章节数据
this.getTrainFileJson(type)
},
// 请求两个对话文件
async getFullDialougueData(type){
const cParams = {"fileType":type,"fileChatper":'1'}
const cRes = await axios.post(`${BASEURL}/getExcelJson`,cParams)
const pParams = {"fileType":type,"fileChatper":'2'}
const pRes = await axios.post(`${BASEURL}/getExcelJson`,pParams)
this.cDialougueList = cRes.data.data[0].map(item => item.句子)//电脑
this.pDialougueList = pRes.data.data[0].map(item => item.句子)//用户
// console.log("打印文件",this.cDialougueList,this.pDialougueList);
this.isDisabled = false
this.fullDialogueShow = true
// 一进入页面先执行电脑说话
// 读取表格数据并添加
this.DialogueList.push('')
this.isDisabled = true
let flagCount = 0
let typewritingText = this.pDialougueList[0] && this.pDialougueList[0].split('')
let _this = this
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
this.isDisabled = false
clearInterval(_this.timer)
}
const targetTypewritingText = _this.DialogueList[_this.DialogueList.length - 1] + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
_this.$set(_this.DialogueList,_this.DialogueList.length - 1,targetTypewritingText.replace(':',''))
})
}, 100);
},
// 获取单词句子数据
async getTrainFileJson(){
const params = {"fileType":this.type,"fileChatper":this.curIndex}
const res = await axios.post(`${BASEURL}/getExcelJson`,params)
this.trainShow = true
if(this.type == 1){
this.totalListdata = []
this.totalListdata = res.data.data[0]
}
if(this.type == 2){
this.totalListdata = []
this.totalListdata = res.data.data[0].map(item => item.例句 || item.句子)
}
this.updateNextConent()
},
// 切换到下一个单词
gotoNext(){
this.resetScore()
this.resetSpeech()
this.curPositionIndex ++
this.updateNextConent()
// 在这里进行后期优化,每一个单词的数据由后端提供,需要达到下一次登入进来直接跳转到对应章节以及单词位置,解决方案是点击退出按钮或者记录本次位置按钮的时候调用后台接口把当前位置传递给后台,存储到数据库
},
// 切换到上一个单词
gotoPrev(){
this.resetScore()
this.resetSpeech()
this.curPositionIndex --
this.updatePrevConent()
// 在这里进行后期优化,每一个单词的数据由后端提供,需要达到下一次登入进来直接跳转到对应章节以及单词位置,解决方案是点击退出按钮或者记录本次位置按钮的时候调用后台接口把当前位置传递给后台,存储到数据库
},
// 切换到下一个章节
updateNextConent(){
this.content = this.totalListdata[this.curPositionIndex]?.字母 || this.totalListdata[this.curPositionIndex]?.单词 || this.totalListdata[this.curPositionIndex]
if(!this.content){//如果基础练习到了该章节的最后一个单词,那么就切换到下一个章节
this.curIndex ++
this.changeChaper(this.curIndex)
}
},
// 切换到上一个章节
updatePrevConent(){
this.content = this.totalListdata[this.curPositionIndex]?.字母 || this.totalListdata[this.curPositionIndex]?.单词 || this.totalListdata[this.curPositionIndex]
if(!this.content){//如果基础练习到了该章节的最后一个单词,那么就切换到下一个章节
this.curIndex --
this.changeChaper(this.curIndex)
}
},
// 章节切换
changeChaper(id){
this.resetScore()
this.resetSpeech()
this.curPositionIndex = 0
this.curIndex = id
this.getTrainFileJson()
// 点击退出的时候把this.curIndex和用户id给到后端,后端读取对应数组设置truefalse用于锁定 -- 对应章节锁定 -- 在点击模块时查询 同时查询用户是否设置锁定,如果没有就不用去遍历数组更新tabbar
// 查询两个数组是否都为true,只要都为true,那么下一个章节解锁,否则锁定 -- 对应模块锁定 -- 在点击开始训练时查询
},
// 完整对话章节切换
changeTotalChaper(id){
this.curTotalIndex = id
this.cDialougueList = []
this.pDialougueList = []
this.DialogueList = []
if(id == 1){
this.getFullDialougueData('3')
}
if(id == 2){
this.getFullDialougueData('4')
}
},
// 语音识别主要配置项
speakMain(){
const that = this
this.voice = new Voice({
// 服务接口认证信息 注:apiKey 和 apiSecret 的长度都差不多,请要填错哦,!
appId: '8445676e',
apiSecret: 'MTZiOWQ1OWUyYzRjN2I3NDU2Y2YyYzdl',
apiKey: '207ce21962fa6eeae521415c1b663efe',
// 注:要获取以上3个参数,请到迅飞开放平台:https://www.xfyun.cn/services/voicedictation 【注:这是我的迅飞语音听写(流式版)每天服务量500(也就是调500次),如果你需求里大请购买服务量:https://www.xfyun.cn/services/voicedictation?target=price】
onWillStatusChange: function (oldStatus, newStatus) {
//可以在这里进行页面中一些交互逻辑处理:注:倒计时(语音听写只有60s),录音的动画,按钮交互等!
console.log("在这里打印语音识别的状态",'这是旧状态' + oldStatus,'这是现在的状态' + newStatus);
},
onTextChange: function (text) {
console.log('识别文字打印',text);
that.message = ''
that.message = text
}
});
},
// 完整对话内容显示
dialogueBegin(){
this.isDisabled = true
if(this.finishDialogue) return
clearInterval(this.timer)
if(this.dialogueBtnName == '开始说话'){
this.dialogueCount ++
}
this.dialogueBtnName == '开始说话' ? this.dialogueBtnName = '停止说话' : this. dialogueBtnName = '开始说话'
setTimeout(() => {
this.updateDialoue()
}, 5000);
},
// 建议在点击开始说话的时候出现一个弹窗,弹窗显示识别,点击结束把数据添加到数组列表里面,点击结束对话开始下一段对话
updateDialoue(){
if(this.dialogueBtnName == '开始说话'){//P开始说话 -- 左边
// 读取表格数据并添加
// this.DialogueList.push(this.cDialougueList[this.dialogueCount - 1])
this.DialogueList.push('')
let flagCount = 0
let typewritingText = this.pDialougueList[this.dialogueCount] && this.pDialougueList[this.dialogueCount].split('')
let _this = this
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
this.isDisabled = false
clearInterval(_this.timer)
}
const targetTypewritingText = _this.DialogueList[_this.DialogueList.length - 1] + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
_this.$set(_this.DialogueList,_this.DialogueList.length - 1,targetTypewritingText.replace(':',''))
})
}, 100);
}else{//C开始说话 -- 右边
// 读取表格数据并添加
this.DialogueList.push('')
let flagCount = 0
let typewritingText = this.cDialougueList[this.dialogueCount - 1] && this.cDialougueList[this.dialogueCount - 1].split('')
let _this = this
this.timer = setInterval(() => {
flagCount ++
this.$nextTick(()=>{
if(!typewritingText[flagCount]){
this.isDisabled = false
clearInterval(_this.timer)
}
const targetTypewritingText = _this.DialogueList[_this.DialogueList.length - 1] + ''+ (typewritingText[flagCount] ? typewritingText[flagCount] : '')
_this.$set(_this.DialogueList,_this.DialogueList.length - 1,targetTypewritingText.replace(':',''))
})
}, 100);
}
if(!this.cDialougueList[this.dialogueCount - 1] || !this.pDialougueList[this.dialogueCount - 1]){
this.finishDialogue = true
}
const leftHeight = this.$refs.fatherBox.scrollHeight
this.$nextTick(()=>{
this.$refs.fatherBox.scrollTop = leftHeight
})
}
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。