Vue.js实现文章评论和回复评论功能

本来想把这个页面用jade渲染出来、评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧。
先上在线demo:?js,output

再上效果图

Vue.js实现文章评论和回复评论功能

可直接评论,点击别人的评论能回复别人的评论。

html

<div> <article-content v-bind:article="article"></article-content> <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content> <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea> </div>

数据全都由根组件绑定下去的。这里还监听了几个事件。

<article-content是文章内容的组件,没啥好讲的,直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象,子组件可以用.的方式很好的调用,比分开写好多了。

<article-content组件–文本

然后先说个简单点的,<comment-textarea>,文本框的那个组件。

Vue.component('commentTextarea',{ template:'\ <div>\ <h3>发表评论</h3>\ <b v-if="type">你回复&nbsp;{{name}}</b>\ <textarea value="请填写评论内容" v-model="commentText"></textarea>\ <button @click="addComment">发表</button>\ <button @click="canelComment">取消</button>\ </div>', props: ['type','name'], data: function(){ return {commentText:""} }, methods: { addComment: function() { this.$emit("submit",this.commentText); this.commentText = ""; }, canelComment: function() { this.$emit("canel"); this.commentText = ""; } } });

type是如果点击了别人的评论,会显示 ”你回复xxx “ 的提示框,这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件,我把他们的通信挂在了父组件的一个属性上,实现通信。

文本框内的内容用一个v-model双向绑定,如果点击了确定,就触发一个 addComment事件并把文本内容传给父组件,父组件会监听事件。

commemt-content组件–评论内容

先来确定json格式

comment: [ { name: "有毒的黄同学", //评论人名字 time: "2016-08-17", content: "好,讲得非常好,good", reply: [ //回复评论的信息,是一个数组,如果没内容就是一个空数组 { responder: "傲娇的", //评论者 reviewers: "有毒的黄同学", //被评论者 time: "2016-09-05", content: "你说得对" } } ]

再来看commemt-content组件

Vue.component('commemt-content',{ template:'\ <div>\ <h3>评论</h3>\ <p v-if="comment.length==0">暂无评论,我来发表第一篇评论!</p>\ <div v-else>\ <div v-for="(item,index) in comment" v-bind:index="index" >\ <b>{{item.name}}<span>{{item.time}}</span></b>\ <p @click="changeCommenter(item.name,index)">{{item.content}}</p>\ <div v-if="item.reply.length > 0">\ <div v-for="reply in item.reply">\ <b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>\ <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\ </div>\ </div>\ </div>\ </div>\ </div>', props: ['comment'], methods: { changeCommenter: function(name,index) { this.$emit("change",name,index); } } });

如果没有内容,则显示 “暂无评论,我来发表第一篇评论!”。如果有内容就开始遍历。因为点击评论要知道第几条,所以每条评论要绑一个v-bind:index="index"

到了二次评论那块,还是遍历reply数组,绑定该绑定的。因为就算点击内容,也是加到那条一级评论的最下面,所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已,后面那个index都是一级评论的index。

changeCommenter事件触发了change,父组件监听,执行相应行为。

父组件

var comment = new Vue({ el: "#comment", data: { commenter: "session", //评论人,这里会从session拿 type: 0, //0为评论作者1为评论别人的评论 oldComment: null, //久评论者的名字 chosedIndex: -1, //被选中的评论的index article: { title: "当归泡水喝的九大功效", time: "2016-07-12", read:50, content: "" }, comment: [] //评论内容 }, methods: { //添加评论 addComment: function(data) { if(this.type == 0) { this.comment.push({ name: 'session', time: getTime(), content: data, reply: [] }); //服务器端 }else if(this.type == 1){ this.comment[this.chosedIndex].reply.push({ responder: 'session', reviewers:this.comment[this.chosedIndex].name, time: getTime(), content: data }); this.type = 0; } }, //监听到了点击了别人的评论 changCommmer: function(name,index) { this.oldComment = name; this.chosedIndex = index; this.type = 1; }, //监听到了取消评论 canelCommit: function() { this.type = 0; } } })

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wypgxw.html