vue + vuex 实现评论和回复

效果图

组件需要的 json 格式

commentList: [  {id: 1,isFirstLevel: 0,commentUser: {userId: 10086,nickName: 'huazizhanye',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'},content: 'my name is huazizhanye',createDate: new Date().toLocaleDateString(),childrenList: [{id: 2,isFirstLevel: 1,commentUser: {userId: 10010,nickName: 'mqq',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'},targetUser: {userId: 10086,nickName: 'huazizhanye',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'},content: 'hello huazizhanye',createDate: new Date().toLocaleDateString()},{id: 3,commentUser: {userId: 10086,nickName: 'huazizhanye',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'},targetUser: {userId: 10010,nickName: 'mqq',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'},content: 'hello mqq~',createDate: new Date().toLocaleDateString(),}]},
]

参数介绍

评论列表–参数介绍

参数	介绍	类型
id	评论列表id(唯一)	Number
userId	用户登录后的唯一id	Number
nickName	用户名	string
avatar	用户头像	string
userInfo	当前用户信息	Object
content	回复内容	string
createDate	回复时间	Object
commentList	评论列表	Array
childrenList	评论回复列表	Array
isFirstLevel	一级或二级评论	Number

评论列表–childrenList具体参数介绍

参数	介绍	类型
id	评论列表id(唯一)	Number
commentUser	当前回复的用户	Object
targetUser	当前将要回复的用户	Object
childrenList	评论回复列表	Array
isFirstLevel	一级或二级评论	Number
content	回复内容	string
createDate	回复时间	Object

组件参数介绍

参数	介绍	默认
emojiWidth	表情框宽	560px
showAvatar	是否展示头像	true
isUseEmoj	是否启用表情	true
commentNum	评论数量	0

组件的数据处理

::: note
将数据统一交由vuex处理，如模拟当前已经登录的用户信息等
:::

state: {// 评论数量commentNum: 0,// 当前用户信息userInfo:{userId: 10086,nickName: 'huazizhanye',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/avatat.jpg'}
}

组件的基本使用

// 引用
import Comment from '@/components/Comment'
// 注册
components: {Comment
},
// 初始化vuex 中的数据
import {mapState} from 'vuex'

// 在computed中初始化vuex中的数据
computed: {...mapState({// 从vuex里面取评论列表commentList: state => state.commentList,// 从vuex里面当前用户信息userInfo: state => state.userInfo,// 评论数量commentNum: state => state.commentNum})}

<!-- 在父组件中使用 -->
<comment@doSend="doSend($event)"@doChidSend="doChidSend(arguments)":commentList="commentList":commentNum="commentNum":avatar="avatar":placeholder="placeholder":isUseEmoj="true"></comment>

新增一级评论

// 父组件方法的调用
methods: {doSend(content) {console.log('一级评论发送内容' + content)let data = {// 评论列表的唯一idid: this.commentId++,// 一级评论isFirstLevel: 0,content: content,createDate: new Date().toLocaleDateString(),commentUser: this.userInfo}this.$store.dispatch('addCommentLevelOne', data)}}

// store/index.jsstate: {// 评论数量commentNum: 0,// 评论列表commentList: []
}
actions: {// 添加一级评论addCommentLevelOne({commit}, data) {commit('__addCommentLevelOne', data)// 统计评论数量commit('__getCommentNum')}
},
mutations: {// 添加一级评论__addCommentLevelOne(state,data) {console.log(data)state.commentList.unshift(data)},// 统计评论数量__getCommentNum(state) {state.commentNum = state.commentList.length}
}

回复二级评论

// 父组件方法的调用
methods: {doChidSend(e) {console.log(e)let data = {dataList: {// id: parseInt(Math.random()*100000000),id: this.commentId++,// 二级评论isFirstLevel: 1,// 暂时写死回复评论的人（使用可替换为评论用户）commentUser: {label: '大佬',userId: 10010,nickName: 'mqq',avatar: 'https://huazizhanye.oss-cn-beijing.aliyuncs.com/blogs/images/mqq.jpg'},// 回复谁targetUser: {userId: e[1].userId,nickName: e[1].nickName,avatar: e[1].avatar,},content: e[0],createDate: new Date().toLocaleDateString()},// 要回复的id 为了添加评论列表数据toCommentId: e[2]}this.$store.dispatch('addCommentLevelTwo', data)}}

// store/index.jsstate: {// 评论数量commentNum: 0,// 评论列表commentList: []
}
actions: {// 添加二级评论addCommentLevelTwo({commit}, data) {commit('__addCommentLevelTwo', data)}
},
mutations: {// 添加二级评论__addCommentLevelTwo(state,data) {console.log(state,data)if(state.commentList.findIndex(x => x.id === data.toCommentId) !== -1) {state.commentList.forEach(items => {if(items.id == data.toCommentId) {if (items.childrenList) {items.childrenList.push(data.dataList)} else {items.childrenList = []items.childrenList.push(data.dataList)}}})}}
}

至此就结束了，有什么问题，欢迎下方留言~

源码地址

See Github

vue + vuex 实现评论和回复相关推荐

vue+elementUI+后端springboot多用户评论、回复、点赞
vue+elementUI+后端springboot多用户评论.回复.点赞演示数据库后端评论.回复.点赞.取消点赞. 前端 vue+elementUI.vue脚手架vue-VLI.axios ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
Vue+SpringBoot实现评论功能
目录前言难点实现思路数据表设计数据传输格式设计前端递归显示删除评论前言评论系统相信大家并不陌生,在社交网络相关的软件中是一种常见的功能.然而对于初学者来说,实现一个完整的评论系统并不 ...
jquery实现层级显示效果图_php运用无限级分类实现评论及回复功能
经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止; 从技术角度分析 ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
评论与回复php代码,php – 显示评论和回复？
我正在尝试显示评论和回复,但我真的不知道该怎么做.这是我的桌子. comment_id | byy | user_comment | topic_id | parent_id | 1 |obi |co ...
记录一下使用vue/vuex+SSR框架遇到的bug
项目框架:vue+vuex+vue-server-render 问题描述:页面中有个区块通过state.jkyl (JSON Object)来控制是否需要显示,页面未登录前jkyl的数据是为空的,待登 ...
Vue Vuex的详细教程
Vue Vuex的详细教程 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变 ...

vue + vuex 实现评论和回复

效果图

组件需要的 json 格式

参数介绍

评论列表–参数介绍

评论列表–childrenList具体参数介绍

组件参数介绍

组件的数据处理

组件的基本使用

新增一级评论

回复二级评论

源码地址

vue + vuex 实现评论和回复相关推荐

最新文章

热门文章