vue-实现聊天机器人逐字展示的小demo

<template>

<div>

<div class="word">{{ text }}</div>

<button @click="onClickTyping">打字</button>

<br />

<hr />

<div>{{ txtThinking }}</div>

<button @click="onClickThinking">开始思考</button>

<button @click="onStop">停止思考</button>

</div>

</template>

<script>

export default {

name: 'demo-demo',

data () {

return {

txt: '执行中国第41次南极考察任务的“雪龙”号和“雪龙2”号于北京时间2024年11月19日开始穿越“咆哮”西风带。',

num: 0,

wordTimeout: null,

shouWord: '',

text: '',

txtThinking: '点击开始思考...',

isOffTime: false,

sikaoWendaTimeout: null,

indexTimeWd: 0

}

},

methods: {

onClickThinking () {

if (this.isOffTime) {

window.clearTimeout(this.sikaoWendaTimeout)

this.txtThinking = '点击开始思考...'

this.isOffTime = false

this.sikaoWendaTimeout = null

this.indexTimeWd = 0

} else {

const states = ['思考中', '思考中.', '思考中..', '思考中...']

this.txtThinking = states[this.indexTimeWd]

this.indexTimeWd = (this.indexTimeWd + 1) % states.length // 循环数组索引

this.sikaoWendaTimeout = setTimeout(this.onClickThinking, 200) // 递归调用setTimeout

}

},

onStop () {

this.isOffTime = true

},

onClickTyping () {

// const wordDom = document.querySelector('.word')

const txtLength = this.txt.length

this.wordTimeout = setTimeout(() => {

// this.shouWord += this.txt.charAt(this.num)

// wordDom.innerHTML = this.shouWord

this.text += this.txt.charAt(this.num)

this.num++

if (this.num < txtLength) {

this.onClickTyping()

} else {

window.clearTimeout(this.wordTimeout)

this.wordTimeout = null

}

}, 100)

}

}

}

</script>

<style scoped>

.word {

width: 100%;

min-height: 300px;

text-align: center;

background: #000;

color: #fff;

font-size: 20px;

font-weight: 500;

}

</style>