• 对于文章评论及回复的实现


    先看下大概样子:

     

     

    布局基本和百度文章内的一样,可以去百度随便点个文章看一下效果。

    点击回复按钮会在对应的评论下面出现输入框及发表按钮;

    实现起来也很简单,简单整理一下思路:

    首先数据是二维数组形式的,评论列表内包含回复列表。先循环遍历出所有评论,再在评论内部遍历所有它的回复

    这里没有采用回复框动态添加(addChild)到指定父div的方式,而是直接把回复框直接当作一个元素与评论一起循环遍历,然后利用 v-if 来指定哪个框该显示

     html结构如下:

    子评论的结构与父一样,

    data : 

     两个id一个是评论id,一个是回复(子评论)的id,

     replyIndex是评论的index,

     replyitemIndex是子评论的index

    在点击回复时:

    当前评论的回复框出现,其他评论的框隐藏。再次点击也隐藏,取消回复;

    传入评论id 用于传参,第二个参数为当前点击的 index用作匹配,

    因为页面只能出现一个框,所以如果有子评论的回复框是显示的时候,要把子评论的框先隐藏。

    如果当前点击的 index 和 replyIndex 相等,那么点击的是同一个评论下的回复按钮,那就把框隐藏(replyIndex重新置为false),否则等于新的 index (别的评论框显示)

    点击回复子评论的时候,单传靠 replyitemIndex 还不行,因为点击第一个子评论的你会发现每个评论下面的第一个子评论的框都出现了,所以要指定一个 parentIndex,只让当前点击的这个评论下的子评论的回复框显示,看上面子评论盒子的 v-if 

    当然,如果父评论的回复框有显示的,首先也得把它隐藏

     

    好了,基本就实现了,剩下就去拿对应的ID去走接口就行了。

     这是比较简单易理解的做法,也有好多别的方法,比如把两个回复的方法写成一个去判断,以及动态去插入等等

  • 相关阅读:
    Apicloud_(模板)登陆注册功能模板
    Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成
    Apicloud_(项目)网上书城02_后端数据获取
    Apicloud_(项目)网上书城01_前端搭建
    R_Studio(时序)Apriori算法寻找频繁项集的方法
    R_Studio(聚类)针对iris数据比较几种聚类方法优劣
    R_Studio(神经网络)BP神经网络算法预测销量的高低
    JavaWeb_(SSH论坛)_七、辅助模块
    JavaWeb_(SSH论坛)_六、点赞模块
    JavaWeb_(SSH论坛)_五、帖子模块
  • 原文地址:https://www.cnblogs.com/listen9436/p/15043904.html
Copyright © 2020-2023  润新知