ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue前端文字效果：如何让一段文本像是手动一个一个字打出来的 [打印本页]
作者: 不到断气不罢休    时间: 2024-7-19 17:40
标题: Vue前端文字效果：如何让一段文本像是手动一个一个字打出来的
效果展示


     自己做的AI谈天机器人界面，我以为比微信还悦目
  
由于这个前端略微复杂，下文用最简单的例子来展示：

分析需求

对于AI谈天工具的前端，如果AI生成的文本像是一个一个字打出来的，就会让AI看起来更像真的人，可以大幅度提高用户对AI的密切感。
深入分析该需求，其实就是前端的文本不一次性显示，而是按一定速率逐字显示。
详细做法

须要两个变量，字符串A是实际显示在前端的字符串，另一个字符串B用于生存后端发送来的完整文本，前端控件绑定字符串A，定时从字符串B中取出下一个字符增加到字符串A上即可。
前端很简单
  1. <p class="text">{{ stringA }}</p>
  2. <button @click="print"><p class="text">点击开启动态效果</p></button>
复制代码
后端用setTimeout和递归函数联合
  1. import { ref } from 'vue';
  2. const stringA = ref('');
  3. const stringB = ref('');
  4. stringB.value = '苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”';
  5. function print() {
  6.   console.log(stringA.value.length, stringB.value.length);
  7.   if (stringA.value.length >= stringB.value.length) {
  8.   // 退出递归
  9.     return;
  10.   } else {
  11.   // stringA仍然比stringB短，进入下一次等待和递归
  12.     setTimeout(()=>{
  13.       stringA.value += stringB.value.charAt(stringA.value.length);
  14.       print(stringA, stringB);
  15.     }, 50);
  16.   }
  17. }
复制代码
完整代码

  1. <script setup>import { ref } from 'vue';
  2. const stringA = ref('');
  3. const stringB = ref('');
  4. stringB.value = '苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”';
  5. function print() {
  6.   console.log(stringA.value.length, stringB.value.length);
  7.   if (stringA.value.length >= stringB.value.length) {
  8.   // 退出递归
  9.     return;
  10.   } else {
  11.   // stringA仍然比stringB短，进入下一次等待和递归
  12.     setTimeout(()=>{
  13.       stringA.value += stringB.value.charAt(stringA.value.length);
  14.       print(stringA, stringB);
  15.     }, 50);
  16.   }
  17. }
  18. </script><template>  <main>    <p class="text">{{ stringA }}</p>    <button @click="print"><p class="text">点击开启动态效果</p></button>  </main></template><style scoped>  .text {    font-size: 30px;  }</style>
复制代码
以上代码效果展示：

     前端Vue显示文字动态效果简易版
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4