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 = {
        // 评论列表的唯一id
        id: this.commentId++,
        // 一级评论
        isFirstLevel: 0,
        content: content,
        createDate: new Date().toLocaleDateString(),
        commentUser: this.userInfo
      }
      this.$store.dispatch('addCommentLevelOne', data)
    }
  }

// store/index.js

state: {
    // 评论数量
    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.js

state: {
    // 评论数量
    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