评论中心UI层的实现思路

评论中心UI层的实现思路

comments是项目中最复杂的交互组件之一,这里我就来介绍一下UI层的实现步骤。

TIM图片20180127130539.png

首先,上面的两个评论框都是独立的不同的vue组件。虽然长得一样,但是一个是负责添加新的评论(newcomment),一个负责回复评论(replycomment)。

然后评论中心(comments)也是一个大组件,负责渲染评论列表和回复楼层,其中回复评论的功能会唤起replycomment组件来实现UI交互和回复评论。

newcomment做的事情比较简单,就是添加一条新评论就OK了。replycomment在一个评论项中都是独立渲染一个,点击取消和再次点击回复一样,都是控制着同一个开关来切换渲染。

添加新评论之后,UI交互方面,点击回复和点击回复子评论以及点击添加新评论做的事情一样,都是会唤起replycomment的。

逻辑方面,在评论项上点击回复和在子评论下点击添加新评论一样都是回复该条评论。在子评论下点击回复是回复该条回复,会加上@某某。

TIM图片20180127134320.png

评论中心大致的UI交互思路就是这样,还有些交互逻辑待完成。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容