zoukankan      html  css  js  c++  java
  • 对于文章评论及回复的实现

    先看下大概样子:

     

     

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

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

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

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

    这里没有采用回复框动态添加(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去走接口就行了。

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

  • 相关阅读:
    常见协议基础知识总结--FTP协议
    DG增量恢复
    DG备库无法接受主库归档日志之密码文件
    Oracle密码概要文件,密码过期时间180天修改为3天,相关用户密码是否过期
    ORA-15025 搭建DG环境,restore controlfile报错,提示oracle无法使用ASM存储
    Deinstall卸载RAC之Oracle软件及数据库+GI集群软件
    增加临时表空间组Oracle11g单实例
    安装12C小问题及pdb表空间配置
    判断子表外键约束参数类型
    创建small表空间size32G报错ORA-01144
  • 原文地址:https://www.cnblogs.com/listen9436/p/15043904.html
Copyright © 2011-2022 走看看