vue实现消息badge 标记_vue 新消息提示

场景分析：

场景1：一个人(信息列表一条)发了多条消息(消息列表多条)；

场景2：多个人(信息列表多条)发送了多条消息(消息列表多条)。

思路：

1.把请求的消息列表push进一个数组中，提交到vuex；

2.消息组件外部引用这个数组与最新的请求列表做数据对比(消息id)；

3.把id不同的列表再push进一个新数组；

4.这个数组的长度就是新消息的条数，如果两个数组的id/长度都相同的话，没有数据push长度为0，则表示没有新消息。

//组件内部消息请求

getNewsList() {

classificationList()

.then(res => {

this.newsList = res.Rows;

//1.新数组

let newArr = [];

for(let i in res.Rows){

//2.把请求得来的数据push进新数组

newArr.push({MsgId:res.Rows[i].MsgId});

}

//3.提交到vuex中保存

this.$store.commit('setNewsData',{newArr:newArr});

})

.catch(err => {

console.log("error", err);

});

}

//组件外部消息请求

//html

我的消息{{newLen}}

import { mapState } from "vuex";

import {classificationList} from '@/http/index'

export default{

data(){

return {

newLen:0

}

computed:{

...mapState({

newsLength: state => state.setNewsData

})

created(){

this.getNewsList();

methods:{

getNewsList() {

classificationList()

.then(res => {

//1.新建用来存放新消息的数组

let newarr = [];

//2.最新请求的数据，与上一轮的传到vuex的数据做对比

for(let i in res.Rows){

//3.把不一致的数据push进新数组

if(res.Rows[i].MsgId !== this.newsLength.newArr[i].MsgId){

newarr.push({id:res.Rows[i].MsgId});

}

//4.这数据的长度就代表新消息的条数，放到data中供渲染。

this.newLen = newarr.length;

})

.catch(err => {

console.log("error", err);

});

}

1.消息外部

2.消息组件内部

3.有新消息提醒

author：XiNine

vue实现消息badge 标记_vue 新消息提示相关推荐

vue实现消息badge 标记_Vue $mount实战之实现消息弹窗组件
之前的项目一直在使用Element-UI框架,element中的Notification.Message组件使用时不需要在html写标签,而是使用js调用.那时就很疑惑,为什么element ui使用 ...
vue实现消息badge 标记_Badge组件_element-ui源码分析笔记 - SegmentFault 思否
Badge组件主要用于数字或状态的标记,对于消息类的提醒功能,使用这组件还是很常见的.具体显示效果如下图: 不管组件复杂还是简单,编码实现这个组件的都不是源码分析目的. 源码分析,在于通过一步步的实现 ...
vue实现消息badge 标记_一天一个 Element 组件 - Badge
本文是 Element 的组件源码学习系列. Badge 组件使用文档:badge 标记 Props 我们先来看一下 el-badge 这个组件的入参 props: { value: [String, ...
vue实现消息badge 标记_Badge 标记
Badge 标记 Badge 标记出现在按钮.图标旁的数字或状态标记. 基础用法定义value属性,它接受Number或者String. 评论回复点我查看评论回复 .item { marg ...
vue点击切换类名_vue 新用户引导（vue-dirver）
最近公司经理让我在项目上做一个新用户引导,讲真这玩意我只在APP上看见过,网页上没啥功能啊,还需要引导! 没办法,刚它!!! 在网上查了点资料 Vue 基本上都是 intro.js 和 driver. ...
华为鸿蒙最新官方消息,华为鸿蒙传来新消息，测试版推送日前确定，替代谷歌安卓又进一步...
自2020年12月16日,华为面向手机开发者发布鸿蒙OS的Beta版本开始,华为手机用户对鸿蒙系统的期待值就与日俱增. 今年2月,华为余承东再次放出消息,鸿蒙OS正式版将在四月开始推送.同时,华为.荣 ...
华为手机信息不弹屏了为什么_华为手机为什么微信有新消息不提示？
展开全部微信来消息32313133353236313431303231363533e4b893e5b19e31333433646366手机不提示,要不是网络问题,要不是设置问题.下面逐一排除: 一. ...
微信设置新消息提醒铃声(自定义铃声)
前言: 微信接收新消息时的铃声感觉很吵,微信自带的铃声感觉更加***. 想要语音/视频聊天有声音提醒,但是又不想收到新消息有声音提醒. 但是直接关掉新消息提醒又怕不能及时收到领导(或者小女友)的语音消 ...
vue websocket 新消息提醒
概述: 不是当前聊天,有其他消息来就通过2种方式接受到提醒. 在连接的上下文中判断,符合条件的弹框,显示红点,此处调用了element弹框组件列表点击事件,红点消失列表显示,属性中包含小红点前提 ...

vue实现消息badge 标记_vue 新消息提示

vue实现消息badge 标记_vue 新消息提示相关推荐

最新文章

热门文章