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

}

回复组件

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

</li>

</li>

</ul>

</li>

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

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

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

</li>

</ul>

</div>

</dd>

</dl>

</div>

</template>

export default {

name: 'reply',

props: ['comment'],

methods: {

changecomer: function (name, index) {

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

}

</script>

.box {

overflow: hidden;

margin-bottom: 15px;

.left {

width: 30px;

height: 30px;

float: left;

img {

width: 100%;

height: 100%;

}

.right {

float: left;

width: 90%;

padding-left: 10px;

box-sizing: border-box;

input {

width: 99%;

height: 26px;

vertical-align: top;

}

.two-huifu {

margin: 10px 0;

.right {

width: 90%;

}

.twobox {

overflow: hidden;

margin-left: 32px;

background: #eaeaec;

padding: 10px;

border-bottom: solid 1px #d9d9d9;

margin-bottom: 0

}

.twobox:last-child {

border: 0

}

.huifu-btn {

float: right;

}

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

.dyn-huifu {

padding-top: 15px;

border-top: solid 1px #d9d9d9;

}

</style>

输入文本组件

vue 实现评论回复功能相关推荐

Java单表实现评论回复功能
Java单表实现评论回复功能 1.简介 2.功能实现图 3.数据库设计 4.实体类 5.实现思路 6.功能实现 6.1 Sql入手 6.2 业务实现 7.前端实现 8.最终成果 1.简介最近在写毕业 ...
java评论回复功能例子_Java实现评论回复功能的完整步骤
前言使用递归循环开发评论回复功能,适用于大部分的简单单体应用评论功能或许是大多数的单体应用之中会用到的功能,我们会在自己所开发的项目之中进行集成该功能大多数时候我们会将评论功能划分成以下几种: ...
实现微信公众号评论回复功能
最近做一个项目,实现类似微信公众号评论回复功能,如图所示: 大概分以下几个组件: 表情包组件: <template><div class="showEmjio" ...
thinkphp5实现评论回复功能
由于之前写评论回复都是使用第三方插件:畅言所以也就没什么动手,现在证号在开发一个小的项目,所以就自己动手写评论回复,没写过还真不知道评论回复功能听着简单,但仔细研究起来却无法自拔,由于用户量少, ...
Android开发之评论回复功能
Android开发之评论回复功能一:效果图二:具体代码 1.首先是布局文件(activity_main) 2.第二个布局文件(comment_item) 3.第三个布局文件(reply_item) ...
评论回复功能的设计与实现
评论回复功能的数据库设计可以分开设计成两张表,评论表和回复表,也可以将其设计为一张表,我采用的是一张表评论回复表的相关字段(我做的是商品goods下的评论回复) 字段解释: gc_id:评论回复表i ...
vue3评论回复功能
运用的是vue3+ts,文本框和小图标使用的是ant-design-vue框架简单的实现了页面布局,点击回复等小功能(删除数据和回复添加到数组中目前没有写,因为项目要求后面需要对接后端接口,所以就懒 ...
mysql 评论回复表设计_数据库设计——评论回复功能
1.概述评论功能已经成为APP和网站开发中的必备功能.本文主要介绍评论功能的数据库设计. 评论功能最主要的是发表评论和回复评论(删除功能在后台).评论功能的拓展功能体现有以下几方面: (1)单篇文章 ...
评论回复功能 asp.net_微信重大更新！公众号推送时间线打乱+7大新功能上线！怎么玩？...
作者 |韩俊杰来源 |馒头商学院「ID:mantousxy」自从微信年初举办公开课后,每个月都没闲着,各种新功能.小改版层出不穷.就在最近,微信又接连推出几项新功能,动作让人"眼花缭乱&qu ...

vue 实现评论回复功能

vue 实现评论回复功能相关推荐

最新文章

热门文章