1. 程式人生 > 其它 >對於文章評論及回覆的實現

對於文章評論及回覆的實現

先看下大概樣子:

佈局基本和百度文章內的一樣,可以去百度隨便點個文章看一下效果。

點選回覆按鈕會在對應的評論下面出現輸入框及發表按鈕;

實現起來也很簡單,簡單整理一下思路:

首先資料是二維陣列形式的,評論列表內包含回覆列表。先迴圈遍歷出所有評論,再在評論內部遍歷所有它的回覆

這裡沒有采用回覆框動態新增(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去走介面就行了。