聊天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.scrollHeightconsole.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()})}}},

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

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

相关文章

使用Scrapy框架和代理IP进行大规模数据爬取

目录 一、前言 二、Scrapy框架简介 三、代理IP介绍 四、使用Scrapy框架进行数据爬取 1. 创建Scrapy项目 2. 创建爬虫 3. 编写爬虫代码 4. 运行爬虫 五、使用代理IP进行数据爬取 1. 安装依赖库 2. 配置代理IP和User-Agent 3. 修改爬虫代码 4. 运行爬虫 六、总结 一…

【AI视野·今日Sound 声学论文速览 第四十二期】Fri, 5 Jan 2024

AI视野今日CS.Sound 声学论文速览 Fri, 5 Jan 2024 Totally 10 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers PosCUDA: Position based Convolution for Unlearnable Audio Datasets Authors Vignesh Gokul, Shlomo Dubnov深度学习模型需要大量干净的…

Vue3中如何安装和配置静态路由

1.安装vue-router pnpm i vue-router 2.在src下闯将router目录&#xff0c;在它下边再建一个index.ts,用来创建路由和配置静态路由&#xff08;静态路由就是不管哪个用户都会有的路由页面&#xff0c;比如&#xff0c;登陆页面&#xff0c;主页面&#xff0c;404页面&#…

窗体内元素遍历-通用方法(DevExpress 中BarManager的遍历)

因为一些业务需求&#xff0c;需要对WinForm窗体中的BarManager进行遍历设置。但是DevExpress.XtraBars.BarManager 没有继承Control基类&#xff0c;所以无法使用this.Controls进行遍历。 可以使用下面代码进行遍历&#xff1a; private object SearchBarManager(){try{Syste…

c++ execl 执行 重定向

#include <unistd.h>int main() {pid_t childPid fork(); // 创建子进程if (childPid 0) {// 子进程// 关闭标准输入、输出和错误流close(STDIN_FILENO);close(STDOUT_FILENO);close(STDERR_FILENO);// 打开要写入的文件int fd open("output.txt", O_WRONLY…

【算法Hot100系列】合并两个有序链表

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

前端nginx配置指南

前端项目发布后&#xff0c;有些接口需要在服务器配置反向代理&#xff0c;资源配置gzip压缩&#xff0c;配置跨域允许访问等 配置文件模块概览 配置示例 反向代理 反向代理是Nginx的核心功能之一&#xff0c;是指客户端发送请求到代理服务器&#xff0c;代理服务器再将请求…

数据结构-怀化学院期末题(321)

图的广度优先搜索 题目描述&#xff1a; 图的广度优先搜索类似于树的按层次遍历&#xff0c;即从某个结点开始&#xff0c;先访问该结点&#xff0c;然后访问该结点的所有邻接点&#xff0c;再依次访问各邻接点的邻接点。如此进行下去&#xff0c;直到所有的结点都访问为止。在…

OpenHarmony沙箱文件

一.前言 1.前景提要 DevEcoStudio版本&#xff1a;DevEco Studio 3.1 Release SDK版本&#xff1a;3.2.2.5 API版本&#xff1a;9 2.概念 在openharmony文件管理模块中&#xff0c;按文件所有者分类分为应用文件和用户文件和系统文件。 1&#xff09;沙箱文件。也叫做应…

Jmeter扩展函数?年薪50W+的测试大佬教你怎么玩

很多同学&#xff0c;都问我&#xff1a;“老师&#xff0c;我的 jmeter 里面&#xff0c;怎么没有 MD5 函数&#xff0c;base64 函数也没有&#xff0c;我是不是用了假的 jmeter&#xff1f;” 哈哈哈&#xff0c;不是的。jmeter 的函数&#xff0c;有自带函数和扩展函数两大…

Android13配置selinux让system应用可读sys,proc,SN号

system权限应用读sys,proc目录及SN号 Android13预置的system应用&#xff0c;需要读/sys, /proc目录&#xff0c;读(SN)serial number号, 需要修改selinux配置&#xff0c;否则会报avc错&#xff0e; 其修改方法会比Android11复杂一些&#xff0e; 实现 system_app.te中添加…

等价类划分法

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;软件测试面试题分享&#xff1a; 1000道软件测试面试题及答案&#x1f4e2;软件测试实战项目分享&#xff1a; 纯接口项目-完…

<HarmonyOS第一课>1~10课后习题汇总

HarmonyOS第一课 &#xff1c;HarmonyOS主题课&#xff1e;1~3课后习题汇总 1运行Hello World 判断题 main_pages.json存放页面page路径配置信息。&#xff08;正确&#xff09;DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。&#xff08;正确&#xff09; 单选题…

c++打地鼠游戏代码

c打地鼠游戏代码 #include <graphics.h> //引入easyx图形库 #include <conio.h> #include <time.h> #include <stdlib.h>#define WINDOW_WIDTH 800 //窗口宽度 #define WINDOW_HEITH 600 //窗口高度#define LITTLE_MOUSE_BEGIN_X 100 //小地鼠起始横坐…

二叉树-遍历-单独精讲

遍历:遍历每个元素。 寻常遍历root只会指一次。 而二叉树遍历每个元素则会指三次。 中序遍历-节点的中序 void traveres(TreeNode* root){if(!root)return;traveres(root->left);cout << root->val << endl;traveres(root->right);}中序遍历亦叫节点的中…

Python 自学(六) 之函数

目录 1. python函数的基本结构 P168 2. python函数的可变参数(不定长) *parameter P169 3. python函数的返回值(单个或多个) P173 4. python的匿名函数 lambda P177 1. python函数的基本结构 P168 2. python函数的可变参数(不定…

一文读懂「Attention」注意力机制

前言:Self-Attention是 Transformer 的重点,因此需要详细了解一下 Self-Attention 的内部逻辑。 一、什么是注意力机制? Attention(注意力)机制如果浅层的理解,核心逻辑就是「从关注全部到关注重点」。 Attention 机制很像人类看图片的逻辑,当我们看一张图片的时候,我…

服务器操作系统介绍

1、基本概念 OS ( operating system&#xff0c;操作系统)是管理计算机硬件与软件资源的计算机程序&#xff0c;同时也是计算机系统的内核与基石。 操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入与输出设备、操作网络与管理文件系统等基本事务。操作…

SD-WAN是如何工作的?

SD-WAN软件定义的广域网&#xff0c;其目的是帮助企业组建更为灵活和高效的网络框架。它与传统的广域网相比&#xff0c;具备更快的网络加速能力&#xff0c;更强的安全性和更便捷的使用方式。因此&#xff0c;随着企业在数字化转型的过程中&#xff0c;企业组网需求的不断提升…

用Postman实现接口自动化测试

postman使用 开发中经常用postman来测试接口&#xff0c;一个简单的注册接口用postman测试&#xff1a; 接口正常工作只是最基本的要求&#xff0c;经常要评估接口性能&#xff0c;进行压力测试。 同时&#xff0c;在这我为大家准备了一份软件测试视频教程&#xff08;含面试…