vue3踩坑问题记录

news2024/9/21 0:44:31
//vue3+element-plus
//1、placeholder换行显示
const startTxt = ref('')
const contentText = ref<any>('')
startTxt.value = "请描述问题内容、例如:"
historyData.prompt.forEach((el:any)=>{
      contentText.value += `\n${el.question}`
    })
<ElInput
          v-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、按钮样式
<ElButton
          style="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.scrollLeft
  nextTick(() => {
    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)
})
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1987004.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

点赞收藏测试文章(让我看看有多少机器人在刷互动量)

前言 这里有一些看似合理但实际毫无意义的句子&#xff0c;我需要用它来看看跟我互动的有多少机器人 如果你是人类用户&#xff0c;可以用评论来代替点赞&收藏&#xff0c;爱你~ 目录 前言 正文 1. 紫色的大象在夜空中游泳。 2. 月亮上的饼干师烤出了一片海洋。 3. 时…

数据结构(邓俊辉)学习笔记】词典 03—— 排解冲突(1)

文章目录 1. 一山二虎2. 泾渭分明3. 开放定址4. 线性试探5. 赖惰删除 1. 一山二虎 此前我们已经多次指出&#xff0c;对于需要动态维护的散列表冲突是不可避免的&#xff0c;无论你的散列函数设计的有多么精妙&#xff0c;因此我们不得不回答的第二个重要问题就是一旦发生冲突&…

苹果电脑维护工具:CleanMyMac X让你的Mac焕发新生!

在我们的数字生活中&#xff0c;苹果电脑&#xff08;Mac&#xff09;已成为不可或缺的一部分&#xff0c;无论是为工作披星戴月&#xff0c;还是为娱乐畅游云端。但是&#xff0c;就像任何长时间运行的机器一样&#xff0c;Mac也可能会因为积累的文件和不必要的数据而开始变慢…

DAMA学习笔记(十一)-元数据管理

1.引言 元数据最常见的定义是“关于数据的数据”。它描述了数据本身&#xff08;如数据库、数据元素、数据模型&#xff09;&#xff0c;数据表示的概念&#xff08;如业务流程、应用系统、软件代码、技术基础设施&#xff09;&#xff0c;数据与概念之间的联系&#xff08;关系…

60页PPT数据湖 + 数据中台实施方案

关注智慧方案文库&#xff0c;学习8700多份智慧城市&#xff0c;智慧医院&#xff0c;智能制造&#xff0c;数字化转型&#xff0c;新质生产力&#xff0c;算力&#xff0c;大模型&#xff0c;AIGC&#xff0c;工业互联网&#xff0c;数字孪生......持续更新热点行业解决方案。…

.NET C# Dictionary Hashtable

.NET C# Dictionary & Hashtable 文章目录 .NET C# Dictionary & Hashtable1 Dictionary1.1 底层实现1.2 优点1.3 缺点 2 Hashtable2.1 底层实现2.2 优点2.3 缺点 3 对比总结4 遍历方式&#xff0c;与耗时对比foreach遍历Keys遍历IDictionaryEnumerator遍历耗时对比 1 …

自动化报表实践小结

这一天午休刚休息完&#xff0c;财务经理就喊我&#xff1a;“***&#xff0c;我们找个会议室聊聊”。我是一脸茫然&#xff0c;心里想着&#xff0c;我跟他也没什么私下的工作交流啊&#xff0c;能聊啥呢&#xff0c;还要找个会议室&#xff1f;究竟是什么事情呢&#xff1f;有…

VsCode无法远程调试

一、问题描述 按照《VsCode gdb gdbserver远程调试C程序》中介绍的方法&#xff0c;配置好VsCode后&#xff0c;按下F5快捷键&#xff0c;或点击“Start Debugging”按钮&#xff0c;没有反应&#xff0c;无法启动调试&#xff1a; 二、解决方法 针对该问题&#xff0c;我尝…

【人工智能】Transformers之Pipeline(八):文生图/图生图(text-to-image/image-to-image)

目录 一、引言 二、文生图/图生图&#xff08;text-to-image/image-to-image&#xff09; 2.1 文生图 2.2 图生图 2.3 技术原理 2.3.1 Diffusion扩散模型原理 2.3.2 Stable Diffusion扩散模型原理 2.4 文生图实战 2.4.1 SDXL 1.0 2.4.2 SD 2.0 2.5 模型排名 三、总…

​【香菇带你学Mysql】Mysql超长执行sql定位和优化【建议收藏】

本文为MySQL数据库管理员和开发人员提供了一套全面的超时SQL定位和优化解决方案。通过合理运用这些方法和技巧&#xff0c;可以显著提升MySQL数据库的性能和稳定性&#xff0c;减少超时SQL语句的发生&#xff0c;确保数据库的高效运行。 0. 引言 最近某个Mysql数据库频繁告警…

统信UOS激活系统故障

统信UOS激活系统故障 1. 离线环境下如何激活系统 ①点击右下角的授权管理 ②点击“激活” ③输入激活码,并点击确定 ④离线环境下此时会弹出二维码,使用微信去扫码,按照提示确定激活 ⑤微信确定以后,激活端会显示成功 2. 激活过程中提示服务器连接失败 激活时如果提示服…

Java多商户新零售超市外卖商品系统

解锁新零售奥秘&#xff0c;多商户外卖超市商品系统大揭秘&#xff01; &#x1f31f; 开篇&#xff1a;新零售时代的浪潮 在这个日新月异的数字化时代&#xff0c;新零售已悄然成为商业变革的新风口。想象一下&#xff0c;足不出户就能逛遍全城商家&#xff0c;心仪商品一键…

智算与大模型人才白皮书学习

目录 智算定义 智算的相关政策 公司的智算战略 服务提供者的定义及服务内容 智算人才需求 典型智算参与者的角色要求 业务流程全过程的分解 自己的定位 智算定义 智算通过智能化技术手段优化和提升技术系统的功能和性能&#xff0c;是为满足未来人工智能发展 和相关应用…

如何快速发现SIM卡托潜在问题?

手机SIM卡托通常是指放置SIM卡的卡槽或卡托。SIM卡托位于手机的侧面或顶部&#xff0c;用于插入SIM卡以连接到移动网络。通常&#xff0c;用户可以通过将SIM卡插入手机SIM卡托来激活手机服务、接收通话、发送短信和使用移动数据。SIM卡托一般设计成易于插拔&#xff0c;使用户能…

DataWhale AI夏令营-英特尔-阿里天池LLM Hackathon

英特尔-阿里天池LLM Hackathon 项目思路项目背景项目思路 Lora微调Qwen模型使用ipex_llm推理加速Gradio交互 项目名称&#xff1a;医疗问答助手 项目思路 项目背景 在当今医疗领域&#xff0c;智能问答系统正在逐步成为辅助医疗诊断的重要工具。随着自然语言处理技术的发展&…

基于STM32的智能家居灯光控制系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码灯光控制代码应用场景 智能家居灯光控制办公环境智能照明常见问题及解决方案 常见问题解决方案结论 1. 引言 随着智能家居技术的发展&#xff0c;灯光控制系统在提升家居生活品质…

尝鲜 HarmonyOS NEXT 开发环境搭建

申请好 HarmonyOS NEXT的开发套件白名单后&#xff0c;就可以下载最的开发套件了&#xff0c;最新的开发工具更新时间是2024-06-17&#xff0c;DevEcoStudio5.0-API12-x86-402。下载后是这样的&#xff1a; 我用的是 MAC PRO&#xff0c;所以下载的是 MAC 版&#xff0c;这里有…

VMware Linux 虚拟机设置了共享文件夹找不到如何解决?

如果在‌虚拟机中设置了‌共享文件夹但找不到&#xff0c;可能是因为没有正确执行挂载操作。挂载操作是将主机上的共享文件夹与虚拟机中的某个目录关联起来的步骤。 目前已经设置了共享文件夹&#xff0c;但是在Linux 上并没有找到 执行以下操作&#xff1a; mkdir /mnt/hgf…

云原生第一次作业

一、实验准备 1、准备一台rhel7的主机,并开启主机的图形 2、配置好可用IP 3、做kickstart自动安装脚本后面需要用到DHCP&#xff0c;关闭VMware DHCP功能 一、kickstart的安装和配置 安装 yum install system-config-kickstart 配置 安装httpd yum install httpd -y\n\n…

投资充电桩源码 共享充电桩投资理财源码 金融理财源码 最新理财投资源码php 投资理财网站源码

海外共享项目投资源码&#xff0c;投资充电桩源码 共享充电桩投资理财源码 金融理财源码 最新理财投资源码php 投资理财网站源码 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89612921 更多资源下载&#xff1a;关注我。