对话框打字效果




//vue3方法
const writing = (data, time, fun) => {
  // const last = chatData.value.pop()
  // const msg = { ...last, text: last.text + data[index], loading: false }

  for (let i = 0; i < data.length; i++) {
    ;(function (j) {
      setTimeout(() => {
        const last = chatData.value.pop()
        const msg = { ...last, text: last.text + data[j], loading: false }
        chatData.value.push(msg)
      }, time * j)
    })(i)
  }
  setTimeout(fun, time * data.length)
}


//方法中调用
  const rObj = myQA[query.value]
  if (rObj) {
    writing(rObj.text || '你让我再想想,组织下语言。', 30, () => {
      const last = chatData.value.pop()
      const msg = {
        ...last,
        imageList: rObj.imageList,
        location: rObj.location
      }
      chatData.value.push(msg)
    })
  } else {
    writing('你让我再想想,组织下语言。', 30)
  }

你可能感兴趣的:(vue)