vue 实现评论回复功能

参考文档https://blog.csdn.net/weixin_35987513/article/details/53748707

项目中分别有三个组件

1.dynamic (父组件)

2.reply (子组件 评论的内容区块)

3.commenttext (子组件 评论的输入框)

首先在父组件，先通过异步获取到文章动态的数据，

< div class= " dy_list " v-for = "(item, index) in list " :key = "item .index "

在data中初始化数据

data() {

return {

list : [],

ajaxUrl :'此处为异步接口',

fanwei : ' 0 ',

type : 0, // 0为评论作者 1为评论别人的评论

oldComment : null, // 旧评论者的名字

chosedIndex : - 1, // 被选中的评论的index

comment : [],

show : false

}

},

通过异步方法拿到后台的文章的数据

Create : function() {

this . $nextTick( function() {

this . fetchData()

})

},

methods : {

// 展开全部

openallC( index) {

console . log( this .list[index])

this .list[index] .openall = ! this .list[index] .openall

},

pagechange : function( currentPage) {

this .current = currentPage

},

searchthing : function( searchthing) {

this .Searchthing = searchthing

},

fetchData() {

this .$ajax

. get( this .ajaxUrl, {

params : {

current : this .current,

fanwei : this .fanwei

}

})

. then( res => {

this .list = res .data .list

console . log( this .list)

})

. catch( function( error) {

console . log(error)

})

},

addComment : function( data) {

let index = data[ 1]

if ( this .type == 0) {

this .list[index] .comment . push({

name : ' session ',

time : getTime(),

con : data[ 0],

reply : []

})

} else if ( this .type == 1) {

this .list[index] .comment[ this .chosedIndex] .reply . push({

responder : ' aaaa ',

reviewers : this .list[index] .comment[ this .chosedIndex] .name,

time : getTime(),

content : data[ 0]

})

this .type = 0

}

},

changeCommer : function( name, index) {

this .oldComment = name

this .chosedIndex = index

this .type = 1

},

canelCommit : function() {

this .type = 0

},

commentshow : function( index) {

this .list[index] .openbtn = ! this .list[index] .openbtn

}

},

components : {

SearchWordBtn : SearchWordBtn,

RepLy : RepLy,

CommentText : CommentText

},

}

回复组件

< template>

< div class= " reply-box ">

< p v-if = "comment . length == 0 ">暂无评论，我来发表第一篇评论！p>

< dl v-else>

< dd class= " dynamic-pinglun dyn-huifu " v-for = "(item,index) in comment " :index = "index " :key = "item .index ">

< ul class= " box ">

< li class= " left ">

< img :src = "item .img " alt= "">

li>

< li class= " right ">

< span class= " name ">{{item .name}}span>

< span class= " text ">{{item .con}}span>

< p class= " time ">{{item .time}}p>

li>

< div class= " clear ">div>

< div class= " huifu-btn " @click = " changecomer(item .name, index) ">回复div>

ul>

< div v-if = "item .reply ">

< div class= " two-huifu " v-if = "item .reply . length > 0 ">

< ul class= " box twobox " v-for = "reply in item .reply " :key = "reply .index ">

< li class= " left ">

< img src= " ../../../static/images/touxiang.png " alt= "">

li>

< li class= " right ">

< span class= " name ">{{reply .responder}}@{{reply .reviewers}}:span>

< span class= " text ">{{reply .content}}span>

< p class= " time ">{{reply .time}}p>

li>

< div class= " huifu-btn " @click = " changecomer(reply .responder, index) ">回复div>

ul>

div>

div>

dd>

dl>

div>

template>

< script>

export default {

name : ' reply ',

props : [ ' comment '],

methods : {

changecomer : function ( name, index) {

this . $emit( " change ", name, index)

}

}

}

script>

< style scoped lang= " scss " type= " text/scss ">

.box {

overflow : hidden;

margin-bottom : 15 px;

.left {

width : 30 px;

height : 30 px;

float : left;

img {

width : 100 %;

height : 100 %;

}

}

.right {

float : left;

width : 90 %;

padding-left : 10 px;

box-sizing : border-box;

input {

width : 99 %;

height : 26 px;

vertical-align : top;

}

}

}

.two-huifu {

margin : 10 px 0;

.right {

width : 90 %;

}

}

.twobox {

overflow : hidden;

margin-left : 32 px;

background : #eaeaec;

padding : 10 px;

border-bottom : solid 1 px #d9d9d9;

margin-bottom : 0

}

.twobox : last-child {

border : 0

}

.huifu-btn {

float : right;

}

.time {color : #808080;font-size : 12 px;}

.dyn-huifu {

padding-top : 15 px;

border-top : solid 1 px #d9d9d9;

}

style>

输入文本组件