vue 窗口内容滚动到底部

onMounted(() => {scrollToBottom()
})
// 滚动到底部方法
const scrollToBottom = () => {// 获取聊天窗口容器let chatRoom: any = document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop = chatRoom.scrollHeight;
}

效果

聊天窗口代码 

<template><div class="chat"><div class="left"><div class="top"><ClientOnly><el-input v-model="search" style="width: 240px;" placeholder="搜索联系人" :suffix-icon="Search" /></ClientOnly></div><div class="ul"><div class="li" v-for="item, i in 5" :key="i"><div class="img"><img src="/assets/images/head/user.jpg" alt=""></div><div class="content"><div class="name">前端</div><div class="text text_ov1">大佬,请问这个怎么写?看到请回复一下,谢谢</div></div><div class="tiem">18:00</div></div></div></div><div class="right"><div class="chat-name">前端</div><!-- 聊天内容 --><div class="chat-content"><!-- 收到的 --><div class="chat-item"><div class="chat-img"><img src="/assets/images/head/user.jpg" alt=""></div><div class="chat-text">大佬,请问这个怎么写?看到请回复一下,谢谢!大佬,请问这个怎么写?看到请回复一下,谢谢大佬,请问这个怎么写?看到请回复一下,谢谢大佬,请问这个怎么写?看到请回复一下,谢谢</div></div><!-- 发送的 --><div class="my_chat-item" v-for="item, i in 10" :key="i"><div class="chat-img"><img src="/assets/images/head/user.jpg" alt=""></div><div class="chat-text">大佬,请问这个怎么写?看到请回复一下,谢谢!大佬,请问这个怎么写?看到请回复一下,谢谢大佬,请问这个怎么写?看到请回复一下,谢谢大佬,请问这个怎么写?看到请回复一下,谢谢</div></div></div><!-- 输入框 --><div class="chat-input"><div class="rest"><div class="ul"><div class="li"><i class="iconfont icon-smile"></i></div><div class="li"><i class="iconfont icon-tupian"></i></div></div><div class="publish">发送</div></div><ClientOnly><el-input type="textarea" resize="none" :autosize="{ minRows: 6, maxRows: 6 }" maxlength="500" show-word-limitplaceholder="" v-model="message"></el-input></ClientOnly></div></div></div>
</template><script setup lang="ts">
import { Search } from '@element-plus/icons'
let search = ref("");
let message = ref("");
onMounted(() => {scrollToBottom()
})
// 滚动到底部方法
const scrollToBottom = () => {// 获取聊天窗口容器let chatRoom: any = document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop = chatRoom.scrollHeight;
}</script><style scoped lang="scss">
.chat {margin-left: 22px;width: 1030px;border-radius: 12px;background: #ffffff;display: flex;.left {padding-top: 10px;border-right: 1px solid #dddddd;width: 255px;.top {display: flex;justify-content: center;align-items: center;height: 55px;}.ul {.li {padding: 15px;background-color: #fff;height: 66px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #E4E7ED;cursor: pointer;&:hover {background: #F1F6FF;}.img {width: 42px;height: 42px;overflow: hidden;border-radius: 50%;margin-right: 10px;img {width: 100%;}}div.content {width: 60%;div.name {font-size: 14px;color: #303133;}div.text {margin-top: 2px;font-size: 12px;color: #3D3D3D;}}div.tiem {font-size: 12px;color: #3D3D3D;}}}}.right {padding-top: 10px;flex: 1;.chat-name {border-bottom: 1px solid #dddddd;height: 55px;line-height: 55px;padding-left: 20px;}/**聊天框*/div.chat-content {overflow-y: scroll;height: 500px;padding: 20px 10px;&::-webkit-scrollbar {/**display: none;*/width: 5px !important;}/**我接收的*/div.chat-item {display: flex;margin-top: 20px;div.chat-img {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;margin-right: 5px;img {width: 100%;}}div.chat-text {background: #EEEEEE;border-radius: 6px;padding: 10px;margin-right: 200px;font-size: 14px;color: #3D3D3D;line-height: 20px;flex: 1;}}/**我发送的*/div.my_chat-item {display: flex;flex-direction: row-reverse;margin-top: 20px;div.chat-img {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;margin-left: 5px;img {width: 100%;}}div.chat-text {background: #EEEEEE;border-radius: 6px;padding: 10px;flex: 1;margin-left: 200px;font-size: 14px;color: #3D3D3D;line-height: 20px;}}}.chat-input {height: 30%;border-top: 1px solid #dddddd;.rest {display: flex;justify-content: space-between;align-items: center;padding: 5px 20px;.ul {display: flex;.li {margin-right: 20px;i {color: #3D3D3D;cursor: pointer;}}}}// 清除文本域边框:deep(.el-textarea__inner) {box-shadow: 0 0 0 0px;}:deep(.el-textarea__inner:hover) {box-shadow: 0 0 0 0px;}:deep(.el-textarea__inner:focus) {box-shadow: 0 0 0 0px;}.publish {cursor: pointer;width: 74px;height: 28px;border-radius: 14px;text-align: center;line-height: 28px;background: #fff;color: #888888;font-size: 14px;border: 1px solid #888888;&:hover {background: #C4302C;color: #fff;border: 1px solid #ffffff00;}}}}
}
</style>

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Go】结构体中Tag标识

https://blog.csdn.net/weixin_45193103/article/details/123876319 https://blog.csdn.net/qq_49723651/article/details/122005291 https://juejin.cn/post/7005465902804123679 学一点&#xff0c;整一点&#xff0c;基本都是综合别人的&#xff0c;弄成我能理解的内容 Tag定…

Unity 窗口化设置

在Unity中要实现窗口化&#xff0c;具体设置如下&#xff1a; 在编辑器中&#xff0c;选择File -> Build Settings。在Player Settings中&#xff0c;找到Resolution and Presentation部分。取消勾选"Fullscreen Mode"&#xff0c;并选择"Windowed"。设…

不愧是字节出来的,真厉害...

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前段时间公司缺人&#xff0c;也面了许多测试&#xff0c;一开始…

使用unplugin-auto-import页面不引入api飘红

解决方案&#xff1a;. tsconfig.json文件夹加上 {"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", &q…

安卓调试桥ADB

Logcat 命令行工具 | Android Studio | Android Developers 什么是ADB ADB 全称为 Android Debug Bridge &#xff0c;是 Android SDK &#xff08;安卓的开发工具&#xff09;中的一个工具&#xff0c;起到调试桥的作用&#xff0c;是一个 客户端 - 服务器端程序 。其中 …

利用云手机技术,开拓海外社交市场

近年来&#xff0c;随着科技的不断进步&#xff0c;云手机技术逐渐在海外社交营销领域崭露头角。其灵活性、成本效益和全球性特征使其成为海外社交营销的利器。那么&#xff0c;究竟云手机在海外社交营销中扮演了怎样的角色呢&#xff1f; 首先&#xff0c;云手机技术能够消除地…

【SpringCloud】Ribbon负载均衡

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 …

如何调试Clang源码

下载编译Clang 这个就直接去LLVM官网下载&#xff0c;然后编译好Clang就行&#xff0c;注意得debug模式&#xff0c;保存符号信息。 调试Clang 可以直接通过命令行来调试 #进入调试环境&#xff0c;这里的clang得是刚刚编译好的 lldb ./clang # r是运行&#xff0c;后面是正…

DC-9靶场

一.环境搭建 1.下载地址 靶机下载地址&#xff1a;https://download.vulnhub.com/dc/DC-9.zip 2.虚拟机配置 设置虚拟机为nat&#xff0c;遇到错误点重试和是 开启虚拟机如下图所示 二.开始渗透 1. 信息收集 查找靶机的ip地址 arp-scan -l 发现靶机的ip地址为192.168.11…

rust使用Command库调用cmd命令或者shell命令,并支持多个参数和指定文件夹目录

想要在不同的平台上运行flutter doctor命令&#xff0c;就需要知道对应的平台是windows还是linux&#xff0c;如果是windows就需要调用cmd命令&#xff0c;如果是linux平台&#xff0c;就需要调用sh命令&#xff0c;所以可以通过cfg!实现不同平台的判断&#xff0c;然后调用不同…

Kibana操作Elasticsearch教程

文章目录 简介ES文档操作创建索引查看索引创建映射字段查看映射关系字段属性详解typeindexstore 字段映射设置流程 新增数据新增会随机生成id新增自定义id智能判断 修改数据删除数据查询基本查询查询所有&#xff08;match_all&#xff09;匹配查询多字段查询词条匹配多词条精确…

2024 年广西职业院校技能大赛高职组《云计算应用》赛项样卷

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜…

Vue生命周期,从听说到深入理解(全面分析)

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xff0c;挂载实例到 DOM&#xff0c;以及在数据改变时更新 DOM。在此过程中&#xff0c;它也会运行被称为生命周期钩子的函数&#xff0c;让开发者有机会在特定阶…

关于Devc++调试的问题以及解决STL变量无法查看

目前Devc的调试主要有以下几点&#xff1a; 1.调试不能直接查看stl变量&#xff0c;会卡死不动 2.目前单步进入只能用鼠标键按 3.若想按下一步进入函数体内&#xff0c;要在函数体内打上断点才行 4.调试到return 0 ;上一句就停了&#xff0c;不会结束程序 5.目前F2跳至断点…

docker logs 查找日志常用命令

docker logs 是什么 docker logs 是 Docker 命令行工具提供的一个命令&#xff0c;用于查看容器的日志输出。它可以显示容器在运行过程中生成的标准输出&#xff08;stdout&#xff09;和标准错误输出&#xff08;stderr&#xff09;&#xff0c;帮助用户诊断容器的行为和排查…

慧天【HTWATER】:水文水动力模型的革命性工具,城市内涝的精准解决方案

城市内涝水文水动力模型介绍 在城市排水防涝规划过程中&#xff0c;水文水动力耦合模型已经成为一种不可或缺的分析工具。在模型建立、城市内涝风险评估、排水系统性能诊断以及海绵城市规划等方面&#xff0c;内涝耦合模型提供了相应的模拟及分析工具&#xff1a; 1.1丰富的数…

一、JAVA集成海康SDK

JAVA集成海康SDK 文章目录 JAVA集成海康SDK前言一、项目依赖 jar1. examples.jar2. 项目依赖 jna.jar,可以通过 maven依赖到。二、集成SDK1.HcNetSdkUtil 海康 SDK封装类2.HCNetSDK3.Linux系统集成SDK三、总结前言 提示:首先去海康官网下载 https://open.hikvision.com/dow…

蓝桥杯23年第十四届省赛真题-填充|DFS,贪心

题目链接&#xff1a; 1.填充 - 蓝桥云课 (lanqiao.cn) 蓝桥杯2023年第十四届省赛真题-填充 - C语言网 (dotcpp.com) 说明&#xff1a; dfs就不再多说了&#xff0c;对于每个?都有0和1两个分支&#xff0c;数据范围是&#xff1a; 那么有m个 ?&#xff0c;时间复杂度就是…

视频无水印爬虫采集工具|抖音视频批量下载软件|可导出视频分享链接

全新视频无水印爬虫采集工具&#xff0c;助力您快速获取所需视频&#xff01; 视频无水印爬虫采集工具&#xff0c;为用户提供了强大的视频采集和下载功能。它可以批量提取关键词相关的视频&#xff0c;同时支持单独视频的提取和下载&#xff0c;操作简便&#xff0c;使用方便。…

CSS及javascript

一、CSS简介 css是一门语言&#xff0c;用于控制网页的表现。 cascading style sheet:层叠样式表 二、css的导入方式 css代码与html代码的结合方式 &#xff08;1&#xff09;css导入html有三种方式&#xff1a; 1.内联样式&#xff1a;<div style"color:red&quo…