这是我参与「第四届青训营 」笔记创作活动的第5天。
设计及实现思路
回复评论区域
设计思路
- 回复评论区域样式布局与发布评论区域大致相同，区别为回复评论区域不需要显示头像。
- 回复评论区域的显示主要根据 data 中的数据 inputShow ，通过 v-show 对 inputShow 进行判断。
（注：v-if 是动态添加，当值为false 时，是完全移除该元素，即dom 树中不存在该元素。 v-show 仅是隐藏/ 显示，值为false 时，该元素依旧存在于dom 树中。）
- 回复评论区域布局到二级评论区域的后方，显示回复评论区域时一直显示到二级评论区域的最后方。
- 为 回复评论区域 的发布按钮绑定一个点击事件，点击发布按钮后执行该方法，创建一个二级评论，该方法与创建一级评论原理相同。
实现思路
-
编写前端页面
<div class="comment-form" v-show="_inputShow(i)" > <div class="content"> <div class="form-box"> <div class="auth-card"> <div class="input-box input-box-comment"> <div class="rich-comment-input" contenteditable="true" placeholder="请输入内容" spellcheck="false" disabled="disabled" @input="onDivInput($event)" ></div> </div> </div> <div class="action-box"> <div class="emoji-container emoji-btn"> <div class="emoji-box"> <i class="iconfont icon-shoucang icon"><span>表情</span></i> </div> </div> <div class="image-btn"> <i class="iconfont icon-duihuaxinxitianchong icon"><span>图片</span></i> </div> <div class="submit"> <span>Ctrl + Enter</span> <!-- disabled 赋予该属性时该元素将变得不可交互--> <button class="submit-btn submit-btn-new" @click="sendCommentReply(i)">评论</button> </div> </div> </div> </div> </div>
回复评论区域与评论发布区域类似，分为两大部分输入框以及发布评论的按钮。
-
为整个回复评论区域绑定一个 v-show 事件，根据 _inputShow(i) 方法返回的数据，判断是否显示回复评论区域。
-
输入框与评论发布区域相同，不再过多解释。
-
为评论按钮绑定一个点击事件，当点击发布评论时执行 sendCommentReply(i) 方法，创建一个二级评论，该方法与创建一级评论的方法原理相同，只不过存入的数据不同，可直接套用。
-
隐藏回复区域的方法绑定在二级评论区域，与隐藏发布评论区域的方法相同，不过，要注意一点，回复图标本身绑定的点击事件会影响数据 inputShow ，当点击二级评论区域时，由于事件冒泡，回复图标本身绑定的点击事件也会被触发，所以需要为二级评论区域的回复图标添加 @click.stop 阻止事件冒泡。
-
实现评论区域功能相关的 methods
_inputShow(i) { return this.commentThis.comments[i].inputShow },
根据传入的参数，显示对应一级评论区域内的回复评论框。
sendCommentReply(i) {
if (!this.commentThis.replyComment) {
this.commentThis.$message({
showClose: true,
type: 'warning',
message: '评论不能为空'
})
} else {
let a = {}
let timeNow = new Date().getTime();
let time = this.dateStr(timeNow);
a.from = this.commentThis.myName
a.to = this.commentThis.to
a. headImg = this.commentThis.myHeader
a.comment = this.commentThis.replyComment
a.time = time
a.commentNum = 0
a.like = 0
this.commentThis.comments[i].reply.push(a)
this.commentThis.replyComment = ''
document.getElementsByClassName("rich-comment-input")[i].innerHTML = ""
}
},
实现原理与创建一级评论原理相同，根据传入的参数，确定二级评论该常见在那个一级评论中。
UnShowReplyBtnTwo(i){
if (!this.commentThis.replyComment && this.commentThis.comments[i].inputShow){
this.commentThis.comments[i].inputShow = false
}
},
实现原理与隐藏发布评论区域按钮的方法相同，根据传入的参数，确定哪个一级评论区域的回复评论区域应该隐藏。
dateStr(date) {
//获取js 时间戳
var time = new Date().getTime();
//去掉 js 时间戳后三位，与php 时间戳保持一致
time = parseInt((time - date) / 1000);
//存储转换值
var s;
if (time < 60 * 10) {//十分钟内
return '刚刚';
} else if ((time < 60 * 60) && (time >= 60 * 10)) {
//超过十分钟少于1小时
s = Math.floor(time / 60);
return s + "分钟前";
} else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
//超过1小时少于24小时
s = Math.floor(time / 60 / 60);
return s + "小时前";
} else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
//超过1天少于30天内
s = Math.floor(time / 60 / 60 / 24);
return s + "天前";
} else {
//超过30天ddd
// var date = new Date(parseInt(date));
date = new Date(parseInt(date));
return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
}
},
该方法主要在创建一级二级评论时调用，根据传入的发布时间，与当前时间做对比，将当前时间减去发布时间，获得差值，并对差值进行判断，根据差值的大小返回不同的内容。
