聊天Demo

文章目录

  • 参考链接
    • 使用
    • 前端界面
      • 消息窗口平滑滚动至底部
      • vue使用watch监听vuex中的变量变化

参考链接

vue.js实现带表情评论功能前后端实现(仿B站评论)
vue.js实现带表情评论仿bilibili(滚动加载效果)

vue.js支持表情输入
vue.js表情文本输入框组件

个人说说vue组件

JS操作文本域获取光标/指定位置插入

使用

前端使用:vue.js + vuex + iconfont + element-ui
后端使用:springboot + mybatisplus + redis + netty + websocket + spring security

可能有不少问题,反正先按照自己思路一点一点写,再参考下别人是怎么搞的再优化

前端界面

先写下大概的前端界面,界面出来了,才有继续写下去的动力

在这里插入图片描述
在这里插入图片描述

消息窗口平滑滚动至底部

<div class="panel-main-body" ref="panelMainBodyContainerRef">

    <!-- 对应会话 的消息列表 -->
    <div class="msg-item-list" ref="msgItemListContainerRef">

        <div :class="['msg-item', familyChatMsg.senderId != currUserId ? 'other' : 'owner']"
             v-for="(familyChatMsg, idx) in familyChatMsgList" 
             :key="idx">
             
            <div class="avatar-wrapper ">
                <img :src="familyChatMsg.avatar" class="avatar fit-img" alt="">
            </div>
            
            <div class="msg">
            
                <div class="msg-header">
                    {{ familyChatMsg.nickName }}
                </div>
                
                <div class="msg-content" v-html="familyChatMsg.content"></div>
            </div>

        </div>
    </div>
    
</div>

<script>
export default {

	methods: {
		/* 滚动至底部,不过调用此方法的时机应当在familyChatMsgList更新之后, 因此需要监听它 */
        scrollToEnd() {
            const panelMainBodyContainerRef = this.$refs['panelMainBodyContainerRef']
            const msgItemListContainerRef = this.$refs['msgItemListContainerRef']
            // console.log(msgItemListContainerRef.scrollTop);
            // console.log(panelMainBodyContainerRef.scrollHeight);
            msgItemListContainerRef.scrollTop = msgItemListContainerRef.scrollHeight
            console.log('滚动至底部~');
        },
    }

}
</script>

<style>
.msg-item-list {
     
	 /* 平滑滚动 */
     scroll-behavior: smooth;
}
</style>

vue使用watch监听vuex中的变量变化

computed: {
    ...mapGetters('familyChatStore', ['familyChatMsgList']),
},

watch: {
    // 监听store中的数据 - 是通过监听getters完成的
    familyChatMsgList:{
        handler(newVal, oldVal) {
            // console.log('---------------------');
            // console.log(newVal.length, oldVal.length);
            this.$nextTick(()=>{
                this.scrollToEnd()
            })
        }
    }

},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java】2023年Java语言盘点

2023年Java语言盘点 前言语言排行榜JDK 各个版本使用情况主流框架支持情况JDK 21其他项目参考 前言 星河流转&#xff0c;日月更替&#xff0c;在2023这年里&#xff0c;Java也迎来了它的第28个年头。在这一年里&#xff0c;Java生态系统发生了许多让人瞩目的变化&#xff0c;…

计算机Java项目|Springboot疫情网课管理系统

项目编号&#xff1a;L-BS-ZXBS-07 一&#xff0c;环境介绍 语言环境&#xff1a;Java: jdk1.8 数据库&#xff1a;Mysql: mysql5.7 应用服务器&#xff1a;Tomcat: tomcat8.5.31 开发工具&#xff1a;IDEA或eclipse 二&#xff0c;项目简介 疫情网课也都将通过计算机…

智能计价器Scratch-第14届蓝桥杯Scratch省赛真题第5题

5. 智能计价器&#xff08;80分&#xff09; 背景信息&#xff1a;A城市的出租车计价&#xff1a;3公里以内13元&#xff0c;基本单价每公里2.3元(超过3公里的部分&#xff0c;不满1公里按照1公里收费&#xff09;&#xff0c;燃油附加费每运次1元。例如&#xff1a;3.2公里的…

1875_如何提升开关应用中的EMI表现

Grey 全部学习内容汇总&#xff1a; https://github.com/GreyZhang/g_hardware_basic 1875_如何提升开关应用中的EMI表现 看了一份ST的应用笔记&#xff0c;简单了解了一下EMI相关的一些设计&#xff0c;感觉还比价有收获。整理一下自己的收获点。 资料整理过程说明 参考资…

并发(8)

目录 46.Thread.sleep(),Object.wait(),Condition.await(),LockSupport.part()的区别&#xff1f; 47.如果在wait&#xff08;&#xff09;之前执行了notify&#xff08;&#xff09;会怎样&#xff1f; 48.如果在park()之前执行了unpark()会怎样&#xff1f; 49.什么是AQS&…

【Spring Cloud】关于Nacos配置管理的详解介绍

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Spring Cloud》。&#x1f3af;&#x1f3af; &am…

从零实现CLIP模型

1. 引言 CLIP代表语言图像对比预训练模型&#xff0c;是OpenAI于2021年开发的一个深度学习模型。CLIP模型中图像和文本嵌入共享相同的潜在特征空间&#xff0c;从而能够在两种模式之间直接进行对比学习。这是通过训练模型使相关的图像和文本更紧密地结合在一起&#xff0c;同时…

基于原子搜索算法优化的Elman神经网络数据预测 - 附代码

基于原子搜索算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于原子搜索算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于原子搜索优化的Elman网络5.测试结果6.参考文献7.Matlab代码 摘要&…

Linux:nginx设置网站https

http和https的区别 http: 80 https: 443 这种协议比http协议要安全&#xff0c;因为传输数据是经过加密的 HTTPS简介 HTTPS其实是有两部分组成&#xff1a;HTTP SSL / TLS&#xff0c;也就是在HTTP上又加了一层处理加密信息的模块。服务端和客户端的信息传输都会通过…

在IDEA中使用git分支进行开发然后合并到Master分支,2022.1.x版本

在实际开发过程中&#xff0c;为了避免因为在开发中出现的问题以及方便发布版本&#xff0c;如果是多版本发布的情况相下&#xff0c;我们通常需要采用分支进行开发&#xff0c;这个时候&#xff0c;我们就需要了解git分支的相关知识点了&#xff0c;本篇博客也是博主在实际公司…

【SpringCloud】之配置中心(进阶使用)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringCloud开发之远程消费》。&#x1f3af;&a…

MMFF-NET:多层次多尺度特征融合的弱光图像增强网络

这是我去年的工作&#xff0c;我录用的第一篇SCI&#xff0c;很拉&#xff0c;3区。今年中科院新版分区&#xff0c;变成4区了。很遗憾。后面会持续给大家更新我的文章以及我的内容。硕士阶段的东西几乎创新点都很差。 但是对于初学者我希望它有一定的参考价值。 文章链接&am…

利用Type类来获得字段名称(Unity C#中的反射)

使用Type类以前需要引用反射的命名空间&#xff1a; using System.Reflection; 以下是完整代码&#xff1a; public class ReflectionDemo : MonoBehaviour {void Start(){A a new A();B b new B();A[] abArraynew A[] { a, b };foreach(A v in abArray){Type t v.GetTyp…

不带控制器打包exe,转pdf文件时失败的原因

加了注释的两条代码后&#xff0c;控制器会显示一个docx转pdf的进度条。这个进度条需要控制器的实现&#xff0c;如果转exe不带控制器的话&#xff0c;当点击转换为pdf的按钮就会导致程序出错和闪退。 __init__.py文件的入口

分布式事务理论及Seata实践

分布式事务简介 事务是指作为单个逻辑工作单元执行的一系列操作&#xff0c;要么完全地执行&#xff0c;要么完全地不执行。 事务处理可以确保除非事务性单元内的所有操作都成功完成&#xff0c;否则不会永久更新面向数据的资源。事务的四个特征&#xff08;ACID&#xff09; …

FineBI实战项目一(3):Kettle实现ETL到数据仓库

目前&#xff0c;finebi_shop_bi 中是没有任何数据的&#xff0c;是一个空的数据库。而后续我们的所有数据分析都将在该数据库中进行。我们第一件事情就是要将 「finebi_shop」数据库中的所有表抽取到「finebi_shop_bi」数据库中。要抽取并装载数据到「finebi_shop_bi」中&…

超维空间M1无人机使用说明书——51、ROS无人机使用AR二维码识别与定位

引言&#xff1a;二维码识别与定位是指ROS通过创建AR标签并且对AR标签进行识别&#xff0c;标签可以由自己任意创建&#xff0c;具体方法会在文中给出&#xff0c;摄像头可以通过识别AR标签大小和姿态获取到标签对应的ID和位置等信息&#xff0c;实现识别与定位 注意&#xff…

Qt/QML编程学习之心得:Linux下Thread线程创建(26)

GUI设计中经常为了不将界面卡死,会用到线程Thread,而作为GUI设计工具,Qt也提供了一个这样的类,即QThread。 QThread对象管理程序中的一个控制线程。线程QThread开始在run()中执行。默认情况下,run()通过调用exec()启动事件循环,并在线程内运行Qt事件循环。 也可以通过…

Camtasia2024苹果Mac电脑版(屏幕录制剪辑软件)

Camtasia Mac2024免费版是一款由TechSmith公司官方进行汉化推出的最新版本&#xff0c;借助Camtasia&#xff0c;您可以轻松记录屏幕并创建优美&#xff0c;专业的视频。记录所有内容-您的整个屏幕或只是一个窗口。或者&#xff0c;添加您已经拥有的视频&#xff0c;图像&#…

python 文件

open """ def open(file: FileDescriptorOrPath, //路径mode: OpenTextMode "r", //设置打开文件的模式 r 以只读方式打开文件。文件的指针将会放在文件的开头。这是默认模式。 w 打开一个文件只用写入。如果该文件已存在则打开文件&#…