vue-advanced-chat使用指南

news2024/11/15 0:13:59

demo地址:https://gitee.com/beekim/vue-advanced-chat
vue-advanced-chat的git地址:https://github.com/advanced-chat/vue-advanced-chat

1.搭建demo

demo地址克隆后在demo目录安装依赖并启动
在这里插入图片描述
启动之后的页面如下:
在这里插入图片描述

2.前端代码分析

在这里插入图片描述

2.1 重点api分析

current-user-id:当前用户id

room-id:可随时加载特定房间?

rooms:?

messages:消息列表

room-actions:可用于在单击房间列表中每个房间的下拉图标时显示您自己的按钮

配合事件room-action-handler使用

roomActions: [
{
    name: 'inviteUser', title: '测试下拉' },
{
    name: 'removeUser', title: 'Remove User' },
{
    name: 'deleteRoom', title: 'Delete Room' }
]

在这里插入图片描述

menu-actions:可用于在单击房间内的垂直点图标时显示您自己的按钮

配合事件menu-action-handler使用

menuActions: [
{
    name: 'inviteUser', title: '测试菜单' },
{
    name: 'removeUser', title: 'Remove User' },
{
    name: 'deleteRoom', title: 'Delete Room' }
],

在这里插入图片描述

message-selection-actions:选择消息时,您可以使用它在房间标题中显示自定义操作按钮

messageSelectionActions: [{
    name: 'deleteMessages', title: '你确定要删除嘛?' }]

在这里插入图片描述

templates-text:可用于/在房间文本区域中输入内容时添加自动完成模板文本

templatesText: [
				{
   
					tag: '吃好',
					text: '吃好喝好,一路走好!'
				},
				{
   
					tag: 'action',
					text: 'This is the action'
				},
				{
   
					tag: 'action 2',
					text: 'This is the second action'
				}
			],

在这里插入图片描述

text-messages:可用于替换默认的 i18n 文本

textMessages: {
   
	ROOMS_EMPTY: '无聊天',
	ROOM_EMPTY: '未选中聊天',
	NEW_MESSAGES: '新消息',
	MESSAGE_DELETED: '消息已删除',
	MESSAGES_EMPTY: '无消息',
	CONVERSATION_STARTED: '聊天开始于:',
	TYPE_MESSAGE: '请输入',
	SEARCH: '搜索',
	IS_ONLINE: '在线',
	LAST_SEEN: 'last seen ',
	IS_TYPING: '正在输入...',
	CANCEL_SELECT_MESSAGE: '取消'
}

在这里插入图片描述

2.2 重点事件分析

fetch-more-rooms ?

向下滚动房间列表时触发,应该是实现分页系统的方法

fetch-messages

每次打开房间时都会触发。如果房间是第一次打开,options参数将保持reset: true。(其目的是当用户滚动到顶部时加载对话的较旧消息)

fetchMessages({
     room, options = {
    } }) {
   
this.$emit('show-demo-options', false)

  //如果是第一次打开就初始化房间的参数
if (options.reset) {
   
this.resetMessages()
}

if (this.previousLastLoadedMessage && !this.lastLoadedMessage) {
   
this.messagesLoaded = true
return
}

  //设置当前选中的房间的id值
this.selectedRoom = room.roomId

console.info('[fetchMessages] Selected Room(选中的房间id):' + this.selectedRoom

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

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

相关文章

使用PyQuery库构建有趣的爬虫程序

目录 一、爬虫程序概述 二、PyQuery库介绍 三、使用PyQuery编写爬虫程序 四、注意事项和潜在问题 五、总结 本文将介绍如何使用PyQuery库编写一个有趣且实用的爬虫程序。我们将首先简要介绍爬虫程序的概念和应用,然后详细探讨PyQuery库的特点和优势。接着&…

符号执行初识

一、符号执行概念 符号执行(Symbolic Execution)是一种程序分析技术,它 可以通过分析程序来得到让特定代码区域执行的输入。 符号执行的 目的 是在给定的时间内, 生成一组输入,并通过这些输入尽可能多的探索执行路径。…

动作捕捉系统进行坐标系转换

动作捕捉系统在机器人等应用中常出现被测物与动捕坐标系不一致的问题。这时就需要进行坐标系的转换。在NOKOV度量动作捕捉系统软件中,可以对被测物的坐标系原点偏移量进行设置,实现被测物坐标系与大地坐标系的重合。 一、坐标系偏移操作 在形影动捕软件…

【数据结构】单向链表的增删查改以及指定pos位置的插入删除

目录 单向链表的概念及结构 尾插 头插 尾删 ​编辑 头删 查找 在pos位置前插 在pos位置后插 删除pos位置 删除pos的后一个位置 总结 代码 单向链表的概念及结构 概念:链表是一种 物理存储结构上非连续 、非顺序的存储结构,数据元素的 逻辑顺序 是…

代码随想录第四十一天 | 动态规划:整数拆分(343,加贪心);不同的二叉搜索树(96)

1、leetcode 343:整数拆分 1.1 leetcode 343:动态规划 第一遍代码没思路 代码随想录思路 看到这道题目,都会想拆成两个呢,还是三个呢,还是四个… 我们来看一下如何使用动规来解决 动规五部曲,分析如下&…

win10 + vs2017 + gdal2.0.3 编译

1. 下载并解压gdal2.0.3 我的放置目录是:D:\Depend_3rd_party\gdal2\gdal-2.0.3,其中gdal-2.0.3是解压得到的文件夹 2. 修改 nmake.opt 文件 用notepad打开nmake.opt文件,修改以下三个部分: (1)修改C co…

【Java 进阶篇】深入了解 Java ServletContext

Java ServletContext是Java Servlet技术中的一个重要概念,它提供了一种在整个Web应用程序中共享数据和资源的方式。在本文中,我们将深入探讨ServletContext的用途、工作原理和示例用法。无需担心,即使您是一个基础小白,也可以轻松…

C++:string类!

Cstring 是C中的字符串。 字符串对象是一种特殊类型的容器,专门设计来操作的字符序列。 不像传统的c-strings,只是在数组中的一个字符序列,我们称之为字符数组,而C字符串对象属于一个类,这个类有很多内置的特点,在操作…

首届陕西省商贸服务业“金牌店长”大赛落下帷幕

2023年11月1日,首届陕西省商贸服务业金牌店长大赛在秋林大酒店落下帷幕。这是由陕西省商业联合会、陕西省餐饮联合会、陕西省连锁经营协会和西安市连锁经营协会联合举办,旨在挖掘和培养陕西省商贸服务业的优秀店长,提升商贸服务业的整体水平&…

Java多线程----创建线程、线程池ExecutorService、异步编排

文章目录 创建线程的四种方式方式一、继承Thread方式二、自定义实现Runnable接口方式三、Thread FutureTask Callable返回值方式四、线程池ThreadPoolExecutor 线程池的简单介绍通过ThreadPoolExecutor创建自定义线程池ThreadPoolExecutor创建线程池的7大参数线程池处理任务的…

在校园跑腿系统小程序中,如何设计高效的实时通知与消息推送系统?

1. 选择合适的消息推送服务 在校园跑腿系统小程序中,选择一个适合的消息推送服务。例如,使用WebSocket技术、Firebase Cloud Messaging (FCM)、或第三方推送服务如Pusher或OneSignal等。注册并获取相关的API密钥或访问令牌。 2. 集成服务到小程序后端…

(1)上位机底部栏 UI如何设置

上位机如果像设置个多页面切换: 位置: 代码如下: "tabBar": {"color": "black","selectedColor": "#d43c33","borderStyle":"black","backgroundColor": …

数据库 | 看这一篇就够了!最全MySQL数据库知识框架!

大家好! 作为一名程序员,每天和各种各样的“数据库”打交道,已经成为我们的日常。当然,立志成为一名超级架构师的我,肯定要精通这项技能。咳咳!不过饭还是要一口一口吃的,“数据库”这个内容实在…

黄执中老师人际说服课思考总结(个人笔记整理 ①)

问题描述和解决方法: 😤职场中明明是ta应该做的事,ta为何还生气呢?; 😠不知道怎么和家人孩子沟通?自己明明是对的,可别人就是不听 😡不知道怎么安慰朋友?&…

Python time strptime()和strftime()

1 strptime()方法 根据指定的格式把一个时间字符串解析为时间元组 重要的时间日期格式化符号 %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-…

主机ping、ssh连接不通本地虚拟机

一、问题描述 在使用vscode remote ssh时,连接timeout,而且主机无论如何也ping不通虚拟机,但是虚拟机可以ping通主机。通过vagrant也可以连接虚拟机。 二、解决方案 试了网上包括设置remote ssh在内的许多方法都不行。重新查看主机和虚拟机…

C++类和对象-->默认成员函数

文章目录 类的6个默认成员函数初始化和清理构造函数构造函数概念构造函数特征 析构函数析构函数概念析构函数特征 拷贝赋值拷贝构造函数拷贝构造函数概念拷贝构造函数特征 赋值运算重载运算符重载运算符重载特征 赋值运算符重载赋值运算符特征 取地址重载取地址操作符重载const…

C#中使用LINQtoSQL管理SQL数据库之添加、修改和删除

目录 一、添加数据 二、修改数据 三、删除数据 四、添加、修改和删除的源码 五、生成效果 1.VS和SSMS原始记录 2.删除ID2和5的记录 3.添加记录ID2、5和8 4.修改ID3和ID4的记录 用LINQtoSQL管理SQL Server数据库时,主要有添加、修改和删除3种操作。 项目中创…

Unity AssetBundle批量打包、加载(场景、Prefab)完整流程

目录 1、文章介绍 2、具体思路和写法 (1)AB包的打包 (2)AB包的加载 (3)AB包卸载 3、结语 1、文章介绍 本篇博客主要起记录和学习作用,简单的介绍一下AB包批量的打包和加载AB包的方式&…

项目实战:编辑页面加载库存信息

1、前端编辑页面加载水果库存信息逻辑edit.js let queryString window.location.search.substring(1) if(queryString){var fid queryString.split("")[1]window.onloadfunction(){loadFruit(fid)}loadFruit function(fid){axios({method:get,url:edit,params:{fi…