基于vue+iview UI的多级评论回复功能

我在做项目时遇到了需要评论回复功能。由于iview UI没有该组件，所以自定义设计

我的博客地址：博客地址，点击访问可以查看评论区。

• 效果图如下
  
  支持评论和多级回复

废话不多说，vue代码如下：

• 评论组件

• 回复组件

• 如果需要使用评论组件只需要在指定位置引入即可，代码如下：
• 在当前vue中要先引入该评论组件。才能使用！！

• showCommentById

            //根据id查询该博客的评论信息
            async showCommentById(id) {
                const {data: result} = await this.$http.get("getListByBlogId/" + id)
                if (result.code === 200) {
                    this.commentList = result.data
                } else {
                    this.$Message.success(result.message)
                }
            },

下面介绍评论的数据结构如下：

[{
		"id": 1,
		"pid": 0,
		"nickname": "张三",
		"content": "你们好",
		"avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36D0ELicBiaCEgiaUSRVqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
		"createTime": "2020-04-12T06:32:20.613+0000",
		"replyComments": [{
			"id": 2,
			"pid": 1,
			"nickname": "李四",
			"content": "你好",
			"avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tCEgiaUSRVqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
			"createTime": "2020-04-12T06:32:31.699+0000",
			"replyComments": []
		}]
	},
	{
		"id": 3,
		"pid": 0,
		"nickname": "王五",
		"content": "猪吗？",
		"avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAAJV0ELicBiaCEgiaWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
		"createTime": "2020-04-12T06:34:37.146+0000",
		"replyComments": [{
			"id": 4,
			"pid": 3,
			"nickname": "赵六",
			"content": "？？",
			"avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
			"createTime": "2020-04-12T07:03:47.873+0000",
			"replyComments": []
		}]
	},
]