基本样式 ：
<template>
<van-cell class="comment-item">
<van-image
slot="icon"
class="avatar"
round
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<div slot="title" class="title-wrap">
<div class="user-name">用户名称</div>
<van-button
class="like-btn"
icon="good-job-o"
>赞</van-button>
</div>
<div slot="label">
<p class="comment-content">这是评论内容</p>
<div class="bottom-info">
<span class="comment-pubdate">4天前</span>
<van-button
class="reply-btn"
round
>回复 0</van-button>
</div>
</div>
</van-cell>
</template>
<script>
export default {
name: 'CommentItem',
props: {
//每行的评论信息
comment: {
type: Object,
required: true
}
},
methods: {}
}
</script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
}
.liked{
background-color:orange;
}
}
</style>
添加动态评论，从评论组件list ====》 单个评论组件item ，传值 item 是每个评论的信息 comment ；
and ：封装 2 个接口，给评论点赞和取消点赞的接口 ；
<template>
<van-cell class="comment-item">
<!-- 评论的头像 -->
<van-image
slot="icon"
class="avatar"
round
fit="cover"
:src="comment.aut_photo"
/>
<div slot="title" class="title-wrap">
<!-- 作者名字 -->
<div class="user-name">{{ comment.aut_name }}</div>
<!-- 点赞的处理逻辑 -->
<van-button
class="like-btn"
:icon="comment.is_liking ? 'good-job' : 'good-job-o'"
>{{ comment.is_liking ? "已赞" : "赞" }}</van-button
>
</div>
<div slot="label">
<!-- 评论的具体内容 -->
<p class="comment-content">{{ comment.content }}</p>
<div class="bottom-info">
<!-- 评论的时间 -->
<span class="comment-pubdate">{{ comment.pubdate | formatTime }}</span>
<!-- 回复评论个数 -->
<van-button class="reply-btn" round
>回复 {{ comment.reply_count }}</van-button
>
</div>
</div>
</van-cell>
</template>
<script>
import { addCommentLikeApi, delCommentLikeApi } from "@/api/Article";
export default {
name: "CommentItem",
props: {
//每行的评论信息
comment: {
type: Object,
required: true,
},
},
methods: {},
};
</script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
}
.liked {
background-color: orange;
}
}
</style>
ps：视图更新，就是发送接口
调用接口点赞 和 取消点赞 ：
<template>
<van-cell class="comment-item">
<!-- 评论的头像 -->
<van-image
slot="icon"
class="avatar"
round
fit="cover"
:src="comment.aut_photo"
/>
<div slot="title" class="title-wrap">
<!-- 作者名字 -->
<div class="user-name">{{ comment.aut_name }}</div>
<!-- 点赞的处理逻辑 -->
<van-button
@click="clickHandler"
:loading="isLoading"
class="like-btn"
:icon="comment.is_liking ? 'good-job' : 'good-job-o'"
>{{ comment.is_liking ? "已赞" : "赞"
}}{{ comment.like_count }}</van-button
>
</div>
<div slot="label">
<!-- 评论的具体内容 -->
<p class="comment-content">{{ comment.content }}</p>
<div class="bottom-info">
<!-- 评论的时间 -->
<span class="comment-pubdate">{{ comment.pubdate | formatTime }}</span>
<!-- 回复评论个数 -->
<van-button class="reply-btn" round
>回复 {{ comment.reply_count }}</van-button
>
</div>
</div>
</van-cell>
</template>
<script>
import { addCommentLikeApi, delCommentLikeApi } from "@/api/Article";
export default {
name: "CommentItem",
props: {
//每行的评论信息
comment: {
type: Object,
required: true,
},
},
data() {
return {
isLoading: false, // 节流阀
};
},
methods: {
async clickHandler() {
// 判断是否登录，未登录不能点赞
// 开始转圈圈，按钮不能点击了
this.isLoading = true;
if (!this.$store.state.user) return this.$toast.fail("登录才可以操作");
try {
if (this.comment.is_liking) {
// 已点赞，取消点赞
await delCommentLikeApi(this.comment.com_id);
this.comment.like_count--;
} else {
// 未点赞就点赞
await addCommentLikeApi({
target: this.comment.com_id,
});
this.comment.like_count++;
}
// 视图更新（点赞按钮的颜色变化） 取反即可
this.comment.is_liking = !this.comment.is_liking;
} catch (error) {
console.log(error);
}
// 结束转圈圈，按钮可以点击了
this.isLoading = false;
},
},
};
</script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
}
.liked {
background-color: orange;
}
}
</style>
标签：comment,color,height,内容,组件,评论,font,30px,size
From： https://www.cnblogs.com/zhulongxu/p/16798347.html