基本样式 ：
<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>
原文地址：http://www.cnblogs.com/zhulongxu/p/16798347.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
