vue3踩坑问题记录
//vue3+element-plus
//1、placeholder换行显示
const startTxt = ref('')
const contentText = ref<any>('')
startTxt.value = "请描述问题内容、例如:"
historyData.prompt.forEach((el:any)=>{contentText.value += `\n${el.question}`})
<ElInputv-model="question"@keyup.enter="handleSend"@keydown.native.enter.prevent="handleEnter"type="textarea":placeholder="startTxt+contentText":autosize="{ minRows: 6, maxRows: 6 }"resize="none"class="input-with-line-break"/>2、禁用回车事件的默认行为
@keydown.native.enter.prevent="handleEnter"const handleEnter = function(event:any){event.preventDefault();
}
3、按钮样式
<ElButtonstyle="position: absolute; right: 10px; bottom: 10px"type="primary"round:icon="Promotion"plain@click="handleSend"/>
4、聊天功能,一直让新内容处在最下面
给聊天区域绑定ref;
nextTick(()=>{scrollTop.value.scrollTop = scrollTop.value.scrollHeight})5、两个不相关的表格同时联动横向滚动// 表格滚动,两个表格都绑定ref
//滚动公共方法
const scrollFun = function (data: any, el: any) {const scrollLeft = data.target.scrollLeftnextTick(() => {el?.setScrollLeft(Number(scrollLeft))})
}
//第一个表格
const handleScroll = function (event: any) {scrollFun(event, bottomTableRef.value)
}
//第二个表格
const handleScrollBottom = function (event: any) {scrollFun(event, topTableRef.value)
}
// 待优化,尽量别绑定在window上
window?.addEventListener('scroll', handleScroll, true)
window?.addEventListener('scroll', handleScrollBottom, true)//离开做销毁,不然会引起内存泄漏
onUnmounted(() => {storageValue.value = ''window.removeEventListener('scroll', handleScroll)window.removeEventListener('scroll', handleScrollBottom)
})

相关文章:
vue3踩坑问题记录
//vue3element-plus //1、placeholder换行显示 const startTxt ref() const contentText ref<any>() startTxt.value "请描述问题内容、例如:" historyData.prompt.forEach((el:any)>{contentText.value \n${el.question}}) <ElInputv-mo…...
Python 爬虫实战:Scrapy 框架详解与应用
🛠️ Scrapy 框架基本使用 Scrapy 是一个强大的 Python 爬虫框架,提供了用于提取和处理网页数据的功能。以下是 Scrapy 的基本使用步骤: 安装 Scrapy pip install scrapy创建 Scrapy 项目 scrapy startproject myproject这将生成一个基础…...
60 函数参数——关键参数
关键参数主要指调用函数时的参数传递方式,与函数定义无关。 通过关键参数可以按参数名字传递值,明确指定哪个值传递给哪个参数,实参顺序可以和形参顺序不一致,但不影响参数值的传递结果,避免了用户需要牢记参数位置和…...
wps 最新 2019 专业版 下载安装教程,解锁全部功能,免费领取
文章目录 前言软件介绍软件下载安装步骤激活步骤小福利(安卓APP)软件介绍软件下载安装步骤 前言 本篇文章主要针对WPS2019专业版的安装下载进行详细讲解,软件已激活,可放心使用;并且可以进行账号登录,进行…...
前端(三):Ajax
一、Ajax Asynchronous JavaScript And XML,简称Ajax,是异步的JavaScript和XML。 作用:数据交换,通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下&…...
启动 /使用/关闭 Redis 服务器
1. Linux 启动 Linux 系统启动 Redis 有两种方法,分别是前台启动,后台启动,两者各有差异; (1)前台启动 首先,需要进入 bin 路径(安装路径不同输入的命令也不同); 个人的命令(一般…...
Linux系统中的高级SELinux安全策略定制技术
随着信息技术的发展,计算机系统的安全性变得越来越重要。在开源世界中,Linux作为一种广泛应用的操作系统,其安全性一直备受关注。其中,SELinux(Security-Enhanced Linux)作为Linux系统中的一个安全模块&…...
使用 Ansible Blocks 进行错误处理
注:机翻,未校。 How to Use Ansible Blocks Make your Playbooks more readable and maintainable using Blocks feature in Ansible. 使用 Ansible 中的块功能使 Playbook 更具可读性和可维护性。 Jul 15, 2024 — LHB Community How to Use Ansible…...
java中的静态变量和实例变量的区别
java中的静态变量和实例变量的区别 在Java中,静态变量(也称为类变量)和实例变量是两种不同类型的变量,它们在多个方面存在显著的区别。以下是它们之间的一些主要区别: 存储位置 静态变量:存储在方法区&am…...
【Effecutive C++】条款02 尽量以const, enum, inline替换 #define
Prefer consts, enums, and inline to #define. 这个条款或许改为“宁可以编译器替换预处理器”比较好,因为或许#define不被视为语言的一部分。那正是它的问题所在。当你做出这样的事情: #define ASPECT_RATIO 1.653记号名称ASPECT_RATIO也许从未被编译…...
leetcode-226. 翻转二叉树
题目描述 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1]示例 2: 输入:root [2,1,3] 输出:[2,3,1]…...
用的到linux-tomcat端口占用排查-Day5
前言: 最近使用tomcat搭建了一套测试环境的应用,整个搭建过程也很简单,就是将部署包上传至服务器☞解压☞启动tomcat服务器,当然服务器也是成功启动了,但是发现前端应用报404,具体如下图所示。 一、现象及思…...
mqtt协议详解(0)初步认识mqtt
文章目录 1. 介绍2. 主要特性3. 架构1. 介绍 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议)是一种构建在TCP/IP协议之上的轻量级、基于发布-订阅模式的消息传输协议,适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境,例如IOT。 MQTT 协议于 1…...
Java语言程序设计基础篇_编程练习题*16.7 (设置时钟的时间)
*16.7 (设置时钟的时间) 编写一个程序,显示一个时钟,并通过在三个文本域中输入小时、分钟和秒 钟来设置时钟的时间,如图16-38b 所示。使用程序清单14-21的ClockPane改变时钟大小使其居于面板中央 习题思路 实例化一个ClockPane(在程序清单1…...
YOLOv8新版本支持实时检测Transformer(RT-DETR)、SAM分割一切
原文:YOLOv8新版本支持实时检测Transformer(RT-DETR)、SAM分割一切 - 知乎 (zhihu.com) 一、SAM 分割任何模型 (Segment Anything Model - SAM) 是一种突破性的图像分割模型,可实现具有实时性能的快速分割。 项目地址 https://github.com/facebookresearch/segment-…...
【传输层协议】UDP和TCP协议
文章目录 UDP协议UDP特点UDP的缓冲区基于UDP的应用层协议 TCP协议6位标志位:确认应答机制超时重传机制连接管理机制(握手和挥手)服务端状态转换过程客户端状态转换过程TIME_WAIT状态CLOSE_WAIT状态 为什么是三次握手和四次挥手滑动窗口如果发…...
Java Excel复杂表头,表头合并单元格
Java Excel复杂表头,表头合并单元格 效果预览 一、maven依赖 <!--操作excel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version><scope>test</…...
Java整合腾讯云发送短信实战Demo
简介 在现代应用开发中,短信服务是非常重要的功能之一。它可以用于用户验证、通知等各种场景。本文将介绍如何使用Java整合腾讯云短信服务,并提供一个完整的实战示例代码。 环境准备 在开始之前,确保你已经完成以下准备工作: 注…...
电路中电阻,电容和电感作用总结
电阻作用 1,上拉电阻 电阻的连接一般是一端接上拉的电源(一般与芯片信号的电压值相匹配),另一端连接芯片引脚所对应的信号大概如下图 功能:一、预置某些引脚的功能,例如复位信号拉高(失能&…...
OrangePi AIpro学习1 —— 烧写和ssh系统
目录 一、下载烧写工具和系统 二、烧写和启动 2.1 烧写和启动 2.2 烧写失败后的问题解决 三、串口连接到主机 3.1 串口连接到主机 四、网络连接到主机 4.1 修改香橙派IP地址 4.2 win11配置以太网静态ip 4.4 主机和香橙派直连 4.5 主机和香橙派连接到同一个路由器 五…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
