使用 Vue 3 和 TypeScript 实现带打字效果的仿 AI 分析展示组件
在这篇博客中,我将分享如何用 Vue 3 和 TypeScript 实现一个带打字效果的 AI 分析展示组件。该组件具有如下功能:
- 动态打字效果:模拟打字机逐步显示内容。
- 自动滚动:内容超出容器高度时自动滚动到最新位置。
1. 组件实现需求
我们需要实现一个点击触发获取 AI 分析结果的功能,并动态显示该分析内容,同时实现以下功能:
- 打字效果:AI 分析内容逐字展示,模仿打字机效果。
- 自动滚动:内容过长时,滚动条自动跟随展示最新的内容。
2. 组件功能分析
(1) 打字效果的实现
我们将 AI 分析结果通过定时器逐步显示,模拟打字机效果。每次定时器触发时,向内容中添加一批字符。
3. 代码实现
模板部分
在模板部分,我们定义了一个包含标题和内容的组件。点击标题后触发获取 AI 分析结果,并以打字效果显示内容。加载状态用 Element Plus 提供的 Loading 图标进行展示:
<template><div class="m_ai_analysis_title" @click="fetchAiAnalysis"><span class="iconfont icon-ai_icon m_ai_icon"></span><h3>{{ title }}</h3><el-icon v-if="aiLoading" class="is-loading"><Loading /></el-icon></div><div class="m_ai_analysis" v-if="printedContent"><div class="content-container" ref="contentContainer"><div class="typing-effect" v-html="printedContent"></div></div></div>
</template>
样式部分
为了实现打字机的视觉效果,我们通过 CSS 制作了光标闪烁效果,并设置了内容容器的滚动条样式:
.m_ai_analysis {padding: 12px 16px;border-top: 1px solid #eaeaea;background-color: #f9f9f9;border-radius: 8px;
}.m_ai_analysis_title {margin-top: 20px;display: flex;align-items: center;gap: 6px;cursor: pointer;
}.m_ai_analysis_title:hover .m_ai_icon {color: var(--el-color-primary);transform: scale(1.28);opacity: 0.88;
}h3 {font-size: 16px;font-weight: bold;
}.m_ai_icon {font-size: 28px;color: var(--el-color-primary);transition: all 0.3s ease;
}.m_ai_icon.disabled {cursor: not-allowed;color: #ccc;
}.content-container {max-height: 400px;overflow-y: auto;
}.typing-effect {white-space: pre-wrap;display: inline-block;position: relative;
}.typing-effect::after {content: '|';position: relative;font-size: 1.2em;color: black;animation: blink 1s step-end infinite;
}@keyframes blink {0%, 100% {opacity: 1;}50% {opacity: 0;}
}
核心逻辑部分
在 script 部分,我们使用 Vue 3 的 Composition API 和 TypeScript 来定义组件的核心功能:
<script setup lang="ts">
import commonApi from '@/api/commonApi';
import { Loading } from '@element-plus/icons-vue';
import { ref, watch, nextTick, onBeforeUnmount } from 'vue';const props = defineProps<{title: string;questionId: string | number | null;
}>();const printedContent = ref(''); // 打印内容
const aiLoading = ref(false); // 加载状态
const contentContainer = ref<HTMLElement | null>(null); // 滚动容器
let intervalId: ReturnType<typeof setInterval> | null = null; // 记录 intervalId// 监听 questionId 变化,清空内容
watch(() => props.questionId, async () => {printedContent.value = '';
});// 获取 AI 分析结果
const fetchAiAnalysis = async () => {if (!props.questionId) return;aiLoading.value = true;printedContent.value = '';try {const { data } = await commonApi.getGptAnalysis({ questionId: props.questionId });if (data) {await typeContent(data);}} catch (error) {console.error('Error fetching AI analysis:', error);} finally {aiLoading.value = false;}
};// 打字效果实现
const typeContent = async (content: string) => {let index = 0;const batchSize = 5; // 每次显示的字符数量intervalId = setInterval(async () => {if (index < content.length) {const nextChunk = content.slice(index, index + batchSize);printedContent.value += nextChunk;index += batchSize;await nextTick();scrollToBottom();} else {clearInterval(intervalId!);}}, 100);
};// 自动滚动到容器底部
const scrollToBottom = () => {if (contentContainer.value) {requestAnimationFrame(() => {contentContainer.value!.scrollTop = contentContainer.value!.scrollHeight;});}
};// 清理定时器
onBeforeUnmount(() => {if (intervalId) {clearInterval(intervalId);}
});
</script>
4. 关键技术点解析
(1) 打字效果
使用 setInterval 每隔一定时间添加一部分字符,直到整个内容被打印完成。这种方式模拟了一个打字机的效果,用户可以逐步看到分析内容的生成过程。
(2) 滚动到最新内容
通过 requestAnimationFrame 实现平滑的滚动效果,使得当新内容被添加时,页面自动滚动到底部,保持用户可以看到最新的内容。
效果图:

5. 总结
本文分享了如何在 Vue 3 和 TypeScript 项目中实现一个带打字效果的 AI 分析展示组件。
相关文章:
使用 Vue 3 和 TypeScript 实现带打字效果的仿 AI 分析展示组件
在这篇博客中,我将分享如何用 Vue 3 和 TypeScript 实现一个带打字效果的 AI 分析展示组件。该组件具有如下功能: 动态打字效果:模拟打字机逐步显示内容。自动滚动:内容超出容器高度时自动滚动到最新位置。 1. 组件实现需求 我…...
数据清洗-缺失值填充-K-NN算法(K-Nearest Neighbors, K-NN算法)
目录 一、安装所需的python包二、采用K-NN算法进行缺失值填充2.1代码(完整代码关注底部微信公众号获取)2.2以某个缺失值数据进行实战2.2.1代码运行过程截屏:2.2.2填充后的数据截屏: 三、K 近邻算法 (K-Nearest Neighbors, KNN) 介…...
爬虫----webpack
目录 一. 什么是webpack 出现的原因:同名函数 概念: 特征:大量缩进 webpack的格式 简单的webpack格式: 详细的webpack格式: 几个参数的运用 1. webpack数组形式 2. webpack对象格式 3.多个js文件打包 打印要扣的代码 …...
Spring Mybatis PageHelper分页插件 总结
1.简介 使用分页插件可以帮助我们自动分页,不用手动在写sql的分页逻辑。 2.配置步骤 在pom.xml中添加依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.11<…...
9、等保测评介绍
数据来源:9.等保测评介绍_哔哩哔哩_bilibili 信息系统等级测评 信息系统等级测评是测评机构依据国家信息安全等级保护制度的规定,按照相关管理规范和技术标准,对未涉及国家秘密的信息系统的安全等级保护状况进行检测评估的活动。 等级测评…...
解决Gson将长数字( json字符串)转换为科学记数法格式
Gson(又称Google Gson)是Google公司发布的一个开放源代码的Java库,主要用途为序列化Java对象为JSON字符串,或反序列化JSON字符串成Java对象。 依赖 Gradle: dependencies {implementation com.google.code.gson:gson:2.11.0 }…...
php环境搭建教程
PHP环境搭建教程 在构建和开发PHP应用程序时,搭建一个稳定、高效的PHP环境是基础且关键的一步。本教程将详细介绍如何在不同操作系统(Windows和Linux)上搭建PHP环境,包括Apache服务器的安装与配置、PHP的安装与配置、MySQL的安装…...
测试ASP.NET Core的WebApi项目调用WebService
虚拟机中部署的匿名访问的WebService,支持简单的加减乘除操作。本文记录在WebApi中调用该WebService的方式。 VS2022创建WebApi项目,然后在解决方案资源管理器的Connected Services节点点右键,选择管理连接的服务菜单。 点击下图圈红处…...
【用Java学习数据结构系列】对象的比较(Priority Queue实现的前提)
看到这句话的时候证明:此刻你我都在努力 加油陌生人 个人主页:Gu Gu Study 专栏:用Java学习数据结构系列 喜欢的一句话: 常常会回顾努力的自己,所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者ÿ…...
快手视频怎么保存到相册?(详细操作)
随着短视频的流行,快手已经成为越来越多人日常生活的一部分。无论是搞笑片段、旅行记录,还是生活点滴,用户们每天都会在快手上浏览到大量有趣的视频。有时候,我们会遇到特别想保存的视频,想要分享到朋友圈,…...
为什么 ECB 模式不安全
我们先来简单了解下 ECB 模式是如何工作的 ECB 模式不涉及链接模式,所以也就用不着初始化向量,那么相同的明文分组就会被加密成相同的密文分组,而且每个分组运算都是独立的,这也就意味着可以并行提高运算效率,但也正是…...
『功能项目』事件中心处理怪物死亡【55】
本章项目成果展示 我们打开上一篇54回调函数处理死亡的项目, 本章要做的事情是用事件中心处理怪物死亡后的逻辑 首先打开之前事件中心脚本(不做更改,调用即可): using System.Collections.Generic; using UnityEngine…...
一个安卓鸿蒙化工具
DevEco插件,为已有安卓项目鸿蒙化加速。 目前支持: 1、安卓Vector Assets转svg; 2、json转ets model; 3、kotlin model转ets model; 下载地址:andtoharplugin1.1.0 安装: deveco插件安装选硬…...
PyQt5库学习之QFileDialog.getExistingDirectory函数
PyQt5库学习之QFileDialog.getExistingDirectory函数 一、简介 QFileDialog.getExistingDirectory 是 PyQt5 中的一个函数,它提供了一个标准的目录选择对话框,允许用户选择一个已存在的目录。这个函数是 QFileDialog 类的一部分,通常用于打开…...
AUTOSAR_EXP_ARAComAPI的5章笔记(9)
☞ 返回总目录 5.4 骨架类(Skeleton Class) 骨架类是由AUTOSAR 元模型的服务接口描述(SI description)生成的。ara::com对生成的骨架类的接口进行了标准化。自适应平台(AP)产品供应商的工具链将生成一个完…...
京东-第2题-撞车
Powered by:NEFU AB-IN Link 文章目录 京东-第2题-撞车题意思路代码 京东-第2题-撞车 题意 一条单向单车道的道路上有n辆车,第i辆车位于 xi;,速度大小为 vi。 显然,如果车辆保持此速度行驶下去,在大多数情况下都会发生碰撞。 现…...
Vue3流程图插件-Vue Flow
1、安装:通过 npm 或 yarn 安装 Vue Flow。 npm install vueflow/core# 或者yarn add vueflow/core 2、引入:在你的 Vue 3 项目中引入 Vue Flow。 import { VueFlow, Background, Controls, MiniMap } from vueflow/core;3、使用:在 Vue…...
初始网络编程(下)
所属专栏:Java学习 1. TCP 的简单示例 同时,由于 TCP 是面向字节流的传输,所以说传输的基本单位是字节,接受发送都是使用的字节流 方法签名 方法说明 Socket accept() 开始监听指定端口(创建时绑定的端口&…...
java计算机毕设课设—土地档案管理系统(附源码、文章、相关截图、部署视频)
这是什么系统? 资源获取方式在最下方 java计算机毕设课设—土地档案管理系统(附源码、文章、相关截图、部署视频) 土地档案管理系统是一种将传统纸质档案进行数字化管理的软件。通过该系统,用户能够高效地进行土地档案的存储、查阅、修改和删除等操作…...
第4步CentOS配置SSH服务用SSH终端XShell等连接方便文件上传或其它操作
宿主机的VM安装CENTOS文件无法快速上传,也不方便输入命令行,用SSH终端xshell连接虚拟机的SSH工具就方便多了,实现VM所在宿主机Win10上的xshell能连接vm的centos要实现以下几个环节 1、确保宿主机与虚拟机的连通性。 2、虚拟机安装SSH服务&…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
