vue 仿掘金评论列表
先来个最终效果
代码：
template代码：
<template>
<div class="main">
<div class="title">评论</div>
<div class="comment-form">
<div class="avatar-box"><el-avatar class="header-img" :src="defaultAvatar"></el-avatar></div>
<div class="form-box">
<div class="input-box" >
<div tabindex="0" contenteditable="true" id="replyInput" spellcheck="false"
placeholder="输入评论..." class="reply-input replyInput" @focus="showReplyBtn" @input="onDivInput($event)"></div>
</div>
<div class="action-box">
<div class="emoji emoji-btn">
<div class="emoji-box">
<span class="replyInput" @click="showEmoji($event)" v-clickoutside="hideReplyBtn">表情</span>
<VEmojiPicker :isShowEmoji="isShowEmoji" :inputAdd="inputAdd" @select="selectEmoji" />
</div>
</div>
<div class="reply-btn-box">
<el-button class="reply-btn" size="medium" @click="sendComment" type="primary" >发表评论</el-button>
</div>
</div>
</div>
</div>
<div class="item" v-for="(item,i) in comments" :key="i">
<div class="comment">
<div class="user-popover-box">
<el-avatar class="header-img" :src="item.headImg"></el-avatar>
</div>
<div class="content-box">
<div class="meta-box">
<span class="username">{{item.name}}</span>
</div>
<div class="content">{{item.comment}}</div>
<div class="reply-stat">
<span class="author-time">{{item.time}}</span>
<div class="icon-btn">
<span @click="showReplyInput(i,item.name,item.id)">
<i class="iconfont el-icon-s-comment"></i>
回复({{item.commentNum}})
</span>
<span>
<i class="iconfont el-icon-thumb"></i>
点赞({{item.like}})
</span>
</div>
</div>
<div class="reply-box">
<div class="item" v-for="(reply,j) in item.reply" :key="j">
<div class="comment">
<div class="user-popover-box">
<el-avatar class="header-img" :src="reply.fromHeadImg"></el-avatar>
</div>
<div class="content-box">
<div class="meta-box">
<span class="username">{{reply.from}}</span>
</div>
<div class="content">
<span>回复<a>{{reply.to}}</a>:</span>
<span class="reply">{{reply.comment}}</span>
</div>
<div class="reply-stat">
<span class="author-time">{{reply.time}}</span>
<div class="icon-btn">
<span @click="showReplyInput(i,reply.from,reply.id)">
<i class="iconfont el-icon-s-comment"></i>
回复({{reply.commentNum}})
</span>
<span>
<i class="iconfont el-icon-thumb"></i>
点赞({{reply.like}})
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="_inputShow(i)" class="my-reply my-comment-reply comment-form">
<div class="avatar-box"><el-avatar class="header-img" :src="defaultAvatar"></el-avatar></div>
<div class="form-box">
<div class="input-box" >
<div
tabindex="0"
contenteditable="true"
spellcheck="false"
placeholder="输入评论..."
@input="onDivInput($event)"
class="reply-input reply-comment-input"
></div>
</div>
<div class="action-box">
<div class="reply-btn-box">
<el-button class="reply-btn" size="medium" @click="sendCommentReply(i)" type="primary">发表评论</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
js代码（注:这里引入了emoji表情，emoji的功能未实现，后面有时间加上）：
import VEmojiPicker from './emoji.vue';
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身，是本身，则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.vueClickOutside = documentHandler;
document.addEventListener("click", documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener("click", el.vueClickOutside);
delete el.vueClickOutside;
}
};
export default {
name: "ArticleComment",
data() {
return {
inputAdd:"",
isShowEmoji:false,
replyInput:"",
btnShow: false,
index: "0",
content:'',
emojiContent: "",
myName: "Lana Del Rey",
defaultAvatar: "../../static/images/default-avatar.png",
myHeader:
"https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
myId: 19870621,
to: "",
toId: -1,
comments: [
{
name: "Lana Del Rey",
id: 19870621,
headImg:"https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
comment: "我发布一张新专辑Norman Fucking Rockwell,大家快来听啊",
time: "2019年9月16日 18:43",
commentNum: 2,
like: 15,
inputShow: false,
reply: [
{
from: "Taylor Swift",
fromId: 19891221,
fromHeadImg:
"https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
to: "Lana Del Rey",
toId: 19870621,
comment: "我很喜欢你的新专辑！！",
time: "2019年9月16日 18:43",
commentNum: 0,
like: 15,
inputShow: false
},
{
from: "Ariana Grande",
fromId: 1123,
fromHeadImg:
"https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg",
to: "Lana Del Rey",
toId: 19870621,
comment: "别忘记宣传我们的合作单曲啊",
time: "2019年9月16日 18:43",
commentNum: 0,
like: 5,
inputShow: false
}
]
},
{
name: "Taylor Swift",
id: 19891221,
headImg:
"https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
comment: "我发行了我的新专辑Lover",
time: "2019年9月16日 18:43",
commentNum: 1,
like: 5,
inputShow: false,
reply: [
{
from: "Lana Del Rey",
fromId: 19870621,
fromHeadImg:
"https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
to: "Taylor Swift",
toId: 19891221,
comment: "新专辑和speak now 一样棒！",
time: "2019年9月16日 18:43",
commentNum: 25,
like: 5,
inputShow: false
}
]
},
{
name: "Norman Fucking Rockwell",
id: 20190830,
headImg:
"https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg",
comment: "Plz buy Norman Fucking Rockwell on everywhere",
time: "2019年9月16日 18:43",
commentNum: 0,
like: 5,
inputShow: false,
reply: []
}
]
};
},
directives: { clickoutside },
components: {
VEmojiPicker
},
methods: {
inputFocus() {
var replyInput = document.getElementById("replyInput");
replyInput.focus();
},
showReplyBtn() {
this.btnShow = true;
},
hideReplyBtn() {
this.inputAdd = '';
this.isShowEmoji = false;
},
showReplyInput(i, name, id) {
this.comments[this.index].inputShow = false;
this.index = i;
this.comments[i].inputShow = true;
this.to = name;
this.toId = id;
},
_inputShow(i) {
return this.comments[i].inputShow;
},
_inputHide(i) {
this.comments[i].inputShow = false;
},
sendComment() {
if (!this.replyComment) {
this.$message({
showClose: true,
type: "warning",
message: "评论不能为空"
});
} else {
let a = {};
let input = document.getElementById("replyInput");
let timeNow = new Date().getTime();
let time = this.dateStr(timeNow);
a.name = this.myName;
a.comment = this.replyComment;
a.headImg = this.myHeader;
a.time = time;
a.commentNum = 0;
a.like = 0;
this.comments.push(a);
this.comments.reverse();
this.replyComment = "";
input.innerHTML = "";
}
},
sendCommentReply(i) {
if (!this.replyComment) {
this.$message({
showClose: true,
type: "warning",
message: "评论不能为空"
});
} else {
let a = {};
let timeNow = new Date().getTime();
let time = this.dateStr(timeNow);
a.from = this.myName;
a.to = this.to;
a.fromHeadImg = this.myHeader;
a.comment = this.replyComment;
a.time = time;
a.commentNum = 0;
a.like = 0;
this.comments[i].reply.push(a);
this.comments[i].reply.reverse();
this.replyComment = "";
document.getElementsByClassName("reply-comment-input")[i].innerHTML = "";
this._inputHide(i)
}
},
onDivInput: function(e) {
this.replyComment = e.target.innerHTML;
},
showEmoji(e){
this.inputAdd = e.target.className;
this.isShowEmoji = true;
console.log(e.target.className)
},
selectEmoji(emoji) { this.emojiContent += `[${emoji}]`.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="../../static/images/$1.png" class="emoji" draggable="false">')//传过来的名字转为图片
console.log(this.emojiContent)
this.replyComment = this.emojiContent
},
customEmoji(text) { //这个函数就是服务器端把传过来的名称转化为图片的
return text.replace(/\[([A-Za-z0-9_]+)\]/g, '<img src="../../static/images/$1.png" class="emoji" draggable="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));
return (
date.getFullYear() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getDate()
);
}
}
}
};
css代码（注：这里使用了stylus）：
.main {
width: 1000px;
margin: 0 auto;
.title{
color: #8a9aa9;
font-size: 16px;
font-weight:;
text-align: center;
padding: 1.67rem 0 5px;
}
.comment-form{
display: flex;
position: relative;
padding: 10px;
background-color: #fafbfc;
border-radius: 3px;
margin: 1.333rem 0;
.avatar-box{
flex: 0 0 auto;
.header-img{
margin-right: 10px;
}
}
.form-box{
flex: 1 1 auto;
position: relative;
.input-box{
position: relative;
display: inline-block;
width: 100%;
.reply-input {
min-height: 20px;
line-height: 22px;
padding: 10px 110px 10px 10px;
color: #ccc;
background-color: #fff;
border: 1px solid #f1f1f1;
border-radius: 3px;
text-align: left;
&:empty:before {
content: attr(placeholder);
}
&:focus:before {
content: none;
}
&:focus {
border: 1px solid #007fff;
outline: none;
}
}
}
.action-box{
display: flex;
align-items: center;
margin: .65rem 0 0;
.emoji{
position: relative;
.emoji-box {
display: flex;
align-items: center;
position: relative;
color: #027fff;
cursor: pointer;
font-size: 14px;
span{
display:inline-block;
padding-left 20px;
height: 18px;
background: url('../../static/images/emoji_bg.svg') left center no-repeat;
background-size:18px;
}
}
}
.reply-btn-box {
flex: 0 0 auto;
margin-left: auto;
}
}
}
}
.item {
margin-bottom: 15px;
padding: 10px;
.comment {
display: flex;
.user-popover-box {
height: 40px;
}
.content-box {
border-bottom: 1px solid #f1f1f1;
margin-left: 15px;
flex: 1 1 auto;
text-align: left;
.meta-box {
display: flex;
align-items: center;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
}
.content {
margin-top: 5px;
font-size: 16px;
line-height: 1.8;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-all;
color: #505050;
a{
display:inline-block;
margin:0 4px;
font-size: 14px;
font-weight:;
color: #406599;
cursor:pointer;
}
}
.reply-stat {
display: flex;
margin-top: 10px;
font-weight:;
.author-time {
font-size: 14px;
color: #8a9aa9;
cursor: default;
}
.icon-btn {
flex: 0 0 auto;
display: flex;
justify-content: space-between;
margin-left: auto;
min-width: 8.8rem;
color: #8a93a0;
user-select: none;
span {
display: inline-block;
margin: 0 8px;
min-width: 100px;
padding: 0 3px;
cursor: pointer;
}
}
}
.reply-box {
margin: 15px 0;
background-color: #efefef;
border-radius: 3px;
.item{
padding: 10px 0 10px 10px;
&:not(:last-child) {
border-bottom: 1px solid rgba(178,186,194,0.3);
}
}
}
}
}
}
}
.my-reply {
padding: 10px;
background-color: #fafbfc;
.header-img {
display: inline-block;
vertical-align: top;
}
.reply-info {
position: relative;
display: inline-block;
margin-left: 5px;
width: 90%;
@media screen and (max-width: 1200px) {
width: 80%;
}
.reply-input {
min-height: 20px;
line-height: 22px;
padding: 10px 110px 10px 10px;
color: #ccc;
background-color: #fff;
border: 1px solid #f1f1f1;
border-radius: 3px;
text-align: left;
&:empty:before {
content: attr(placeholder);
}
&:focus:before {
content: none;
}
&:focus {
border: 1px solid #007fff;
outline: none;
}
}
}
.reply-btn-box {
.reply-btn {
position: relative;
float: right;
height: 100%;
}
}
}
.my-comment-reply {
margin-left: 50px;
.reply-input {
width: flex;
}
}
.author-title:not(:last-child) {
border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}
.author-title {
padding: 10px;
.header-img {
display: inline-block;
vertical-align: top;
}
.author-info {
display: inline-block;
margin-left: 5px;
width: 60%;
height: 40px;
line-height: 20px;
>span {
display: block;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.author-name {
color: #000;
font-size: 18px;
font-weight: bold;
}
.author-time {
font-size: 14px;
}
}
.icon-btn {
width: 30%;
padding: 0 !important;
float: right;
@media screen and (max-width: 1200px) {
width: 20%;
padding: 7px;
}
>span {
cursor: pointer;
}
.iconfont {
margin: 0 5px;
}
}
.talk-box {
margin: 0 50px;
>p {
margin:;
text-align: left;
}
.reply {
font-size: 16px;
color: #000;
}
}
.reply-box {
margin: 10px 0 0 50px;
background-color: #efefef;
}
}
最后附上GitHub地址：https://github.com/ALazyTiger/vue-Comment-List
vue 仿掘金评论列表的更多相关文章
- vue实现一个评论列表
<!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...
- Vue把父组件的方法传递给子组件调用(评论列表例子)
Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...
- node.js评论列表和添加购物车数据库表创建
2.1:评论列表--发表评论 用户点击新闻列表某一条新闻,看到新闻详细发表评论 -用户输入评论内容 -发表评论 [将用户评论内容保存数据库 xz_comment] 2.2:评论列表--发表评论-开发评 ...
- Android开发——实现固定在ScrollView顶部的View，类似于新浪微博的评论列表的顶部
现在很多App都实现了这个功能,例如新浪微博评论页面的评论.转发.赞的数字可以固定在屏幕上方.我个人很喜欢这种设计,所以利用一点空余时间简单实现了一个类似的功能. 先来看一下上面这张图的效果 这个是新 ...
- Ion-affix & Ion-stick 仿IOS悬浮列表插件
Ion-affix & Ion-stick 仿IOS悬浮列表插件 Ion-affix 1.相关网页 Ion-affix 2.环境准备: 执行命令 bower install ion-affix ...
- WPF 自定义TreeView控件样式，仿QQ联系人列表
一.前言 TreeView控件在项目中使用比较频繁,普通的TreeView并不能满足我们的需求.因此我们需要滴对TreeView进行改造.下面的内容将介绍仿QQ联系人TreeView样式及TreeVi ...
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- 动手分析安卓仿QQ联系人列表TreeView控件
因项目需要需要用到仿QQ联系人列表的控件样式,于是网上找到一个轮子(https://github.com/TealerProg/TreeView),工作完成现在简单分析一下这个源码. 一. 需要用 ...
随机推荐
- [每日一题2020.06.16] leetcode双周赛T3 5423 找两个和为目标值且不重叠的子数组 DP, 前缀和
题目链接 给你一个整数数组 arr 和一个整数值 target . 请你在 arr 中找 两个互不重叠的子数组 且它们的和都等于 target .可能会有多种方案,请你返回满足要求的两个子数组长度和的 ...
- Excel经典教程之一
照片名称:未命名 照片名称:自动筛选 照片名称:在Excel中字符替换 照片名称:在Excel中直接编辑“宏” 照片名称:在Excel中为导入外部数据 照片名称:在Excel中行列快速转换 照片名称: ...
- TensorFlow从0到1之TensorFlow多层感知机函数逼近过程（23）
Hornik 等人的工作(http://www.cs.cmu.edu/~bhiksha/courses/deeplearning/Fall.2016/notes/Sonia_Hornik.pdf)证明 ...
- isinstance用法
''' 作用:来判断一个对象是否是一个已知的类型. 其第一个参数(object)为对象,第二个参数(type)为类型名(int...)或类型名的一个列表((int,list,float)是一个列表). ...
- 解决mysql插入数据l出现"the table is full"的问题
需要修改Mysql的配置文件my.ini,在[mysqld]下添加/修改两行:tmp_table_size = 256Mmax_heap_table_size = 256M
- php读取富文本处理html标签问题
thinkphp的一项配置会将富文本编辑器的内容中的html标签进行转义处理 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认参数过滤方法使用htmls ...
- 为什么启动线程是start方法？
为什么启动线程是start方法 十年可见春去秋来,百年可证生老病死,千年可叹王朝更替,万年可见斗转星移. 凡人如果用一天的视野,去窥探百万年的天地,是否就如同井底之蛙? 背景:启动线程是start ...
- SLAM:使用EVO测评ORBSLAM2
SLAM:使用EVO测评ORBSLAM2 EVO是用来评估SLAM系统测量数据以及输出估计优劣的Python工具,详细说明请参照: https://github.com/MichaelGrupp/ev ...
- Kafka源码解析（二）---Log分析
上一篇文章讲了LogSegment和Log的初始化,这篇来讲讲Log的主要操作有哪些. 一般来说Log 的常见操作分为 4 大部分. 高水位管理操作 日志段管理 关键位移值管理 读写操作 其中关键位移 ...
- 5、struct2使用登陆的时候重定向功能，如果没有登陆，重定向到登陆页面
1.实现这样一份功能,列如用户在进行某些操作的时候,如果没有登陆重定向到登陆页面 首先:我们创建一个功能操作页面,用户准备在该页面执行某些操作 在index.jsp中 <%@ page lang ...