vue项目封装评论组件

原创 已于 2022-06-27 10:14:11 修改 · 1.1k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#elementui #vue.js #javascript #前端
于 2022-06-15 15:53:00 首次发布
本文介绍如何在Vue项目中使用ElementUI封装一个评论组件。通过接口获取数据后进行处理，将评论列表(commentList)赋值展示，实现静态效果。

效果图：

评论组件：

<template>
  <div class="comment-view">
    <div v-show="isShowInput" id="commentForm" class="comment-form white-box">
      <div class="form-box">
        <el-input
          ref="commentInput"
          v-model="content"
          type="textarea"
          :rows="3"
          :autofocus="true"
          resize="none"
          placeholder="请输入内容"
        ></el-input>
        <el-button :loading="isLoading" :disabled="isLoading" class="primary" size="small" @click="commentSubmit">发布</el-button>
      </div>
    </div>
    <div ref="commentCt" class="comment-ct white-box">
      <div class="tit">
        评论<span v-if="count">({{ count }})</span>
      </div>
      <div class="comment-list">
        <div v-for="(item, index) in commentList" :key="index" class="item">
          <a class="left-avatar" :href="`/user/${item.memberId}`">
            <el-image :src="item.avatar" fit="cover" class="avatar"></el-image>
          </a>
          <div class="right-info">
            <div class="person">
              <div class="name-time">
                <a class="name" :href="`/user/${item.memberId}`">{{ item.nickname }}</a>
                <SvgIcon v-if="item.isExpert === 1" icon="auth"></SvgIcon>
                <el-tag v-if="item.isAuthor === 1" color="#F3F3F3" type="info" size="mini">作者</el-tag>
                <div class="time">{{ item.releaseTime | dateFormat }}</div>
              </div>
            </div>
            <div class="info">{{ item.content }}</div>
            <ItemOperation
              :operStaus="[
                { icon: 'o-nice', key: 'giveCount', isOperate: true },
                { icon: 'o-comment', text: '回复', isOperate: true },
                { icon: 'o-report', text: '举报', isOperate: true },
              ]"
              :data="item"
              :type="5"
              @handleComment="handleComment"
            >
            </ItemOperation>
            <div v-if="formId === item.id" class="item-form-box">
              <el-input v-model="formValue" :autofocus="true" :placeholder="formPlaceholder"></el-input>
              <el-button
                class="primary"
                size="small"
                :loading="isLoading"
                :disabled="isLoading"
                @click="replySubmit(item.id, item.memberId, 1)"
              >发布</el-button>
            </div>
            <div class="children-list">
              <div
                v-for="(it, i) in item.children"
                v-show="i < showCount || openIds.includes(item.id)"
                :key="i"
                class="item"
              >
                <a class="left-avatar" :href="`/user/${it.memberId}`">
                  <el-image :src="it.avatar" fit="cover" class="avatar"></el-image>
                </a>
                <div class="right-info">
                  <div class="person">
                    <div class="name-time">
                      <a class="name" :href="`/user/${it.memberId}`">{{ it.nickname }}</a>
                      <SvgIcon v-if="it.isExpert === 1" icon="auth"></SvgIcon>
                      <el-tag v-if="it.isAuthor === 1" color="#F3F3F3" type="info" size="mini">作者</el-tag>
                      <div v-if="it.beNickname" class="reply"><span>回复</span> {{ it.beNickname }}</div>
                      <div class="time">{{ it.releaseTime | dateFormat }}</div>
                    </div>
                  </div>
                  <div class="info">{{ it.content }}</div>
                  <ItemOperation
                    :operStaus="[
                      { icon: 'o-nice', key: 'giveCount', isOperate: true },
                      { icon: 'o-comment', text: '回复', isOperate: true },
                      { icon: 'o-report', text: '举报', isOperate: true },
                    ]"
                    :data="it"
                    :type="5"
                    @handleComment="handleComment"
                  />
                  <div v-if="formId === it.id" class="item-form-box">
                    <el-input v-model="formValue" :autofocus="true" :placeholder="formPlaceholder"></el-input>
                    <el-button
                      class="primary"
                      size="small"
                      :loading="isLoading"
                      :disabled="isLoading"
                      @click="replySubmit(item.id, it.memberId, 2)"
                    >发布</el-button>
                  </div>
                </div>
              </div>
              <el-link
                v-if="item.children.length > showCount && !openIds.includes(item.id)"
                class="link"
                type="primary"
                :underline="false"
                @click="openCommit(item)"
              >展开{{ item.children.length - showCount }}条评论</el-link>
            </div>
          </div>
        </div>
      </div>
      <Empty :type="loadingType" @loading="loading" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { controlComment, getCommentList } from "@api/public/index";
import { commentItem } from "@api/public/index.d";

interface DomEle extends Element {
  offsetTop: number;
}
@Component({
  name: "CommentView",
  components: {},
})
export default class CommentView extends Vue {
  @Prop({
    type: Number,
    default: 0,
    required: true,
  })
  readonly sourceId!: number; // 来源文章id
  openIds: number[] = [];
  isLoading = false;
  showCount = 1; // 控制第一次加载几条回复
  content = ""; // 发布评论输入框内容
  formValue = ""; // 回复评论输入框内容，控制评论中的评论框内容
  formId: number | string = ""; // 控制评论中的评论框的展示
  formPlaceholder = ""; // 回复输入框的提示语
  commentList: commentItem[] = [];
  listQuery = {
    page: 1,
    limit: 5,
  };
  count = 0;
  loadingType = 0;
  isShowInput = false;
  // 滚动到评论输入框并聚焦
  pageScrollFn() {
    this.isShowInput = !this.isShowInput;
    if (this.isShowInput) {
      this.content = "";
      this.formId = "";
      this.$nextTick(() => {
        const formDom: DomEle | null = document.querySelector("#commentForm");
        formDom &&
          window.scrollTo({
            top: formDom.offsetTop - 160,
            behavior: "smooth",
          });
        (this.$refs.commentInput as any).focus();
      });
    }
  }
  // 滚动到评论
  scrollComment() {
    this.$nextTick(() => {
      const formDom: any = this.$refs.commentCt;
      formDom &&
        window.scrollTo({
          top: formDom.offsetTop - 80,
          behavior: "smooth",
        });
    });
  }
  // 展示回复输入框并清空值
  handleComment(info: any) {
    if (this.formId === info.id) {
      this.formId = "";
    } else {
      this.formId = info.id;
    }
    this.formValue = "";
    this.formPlaceholder = `回复：${info.nickname}`;
  }
  // 控制显示回复数量
  openCommit(item: { id: number }) {
    const i = this.openIds.findIndex(x => x === item.id);
    if (i !== -1) {
      this.openIds.splice(i, 1);
    } else {
      this.openIds.push(item.id);
    }
  }
  /**
   * @description:  发布评论/回答
   * @param {*}
   * @return {*}
   */
  async commentSubmit() {
    const nowPath = this.$route.fullPath;
    await this.$loginDialog({ nowPath });
    if (!this.content) {
      this.$message("请填写评论内容");
      return;
    }
    this.isLoading = true;
    const json = {
      content: this.content,
      pid: 0,
      sourceId: this.sourceId,
    };
    try {
      await controlComment(json);
      this.isLoading = false;
      this.content = "";
      this.listQuery.page = 1;
      this.getCommentList();
      this.$emit("refresh");
    } catch (error) {
      this.isLoading = false;
    }
  }
  /**
   * @description:  回复
   * @param {*} pid  一级评论id
   * @param {*} beMemberId  被评论用户id
   * @param {*} type  1 回复评论   回复回复
   * @return {*}
   */
  async replySubmit(pid: number, beMemberId: number, type: number) {
    const nowPath = this.$route.fullPath;
    await this.$loginDialog({ nowPath });
    if (!this.formValue) {
      this.$message("请填写评论内容");
      return;
    }
    this.isLoading = true;
    const json: any = {
      content: this.formValue,
      pid,
      sourceId: this.sourceId,
    };
    if (type === 2) {
      json.beMemberId = beMemberId;
    }
    try {
      await controlComment(json);
      this.isLoading = false;
      this.formId = "";
      this.formValue = "";
      const {
        data: { list, count },
      } = await getCommentList({ sourceId: this.sourceId, page: 1, limit: this.commentList.length });
      this.commentList = list;
      this.count = count;
      const i = this.openIds.findIndex(x => x === pid);
      if (i === -1) {
        this.openIds.push(pid);
      }
      this.$emit("refresh");
    } catch (error) {
      this.isLoading = false;
    }
  }
  /**
   * @description:  获取案例/知识评论列表
   * @return {*}
   */
  async getCommentList() {
    this.loadingType = 1;
    const {
      data: { list, count },
    } = await getCommentList({ sourceId: this.sourceId, ...this.listQuery });
    if (count === 0) {
      this.loadingType = 3;
    } else if (this.listQuery.page * this.listQuery.limit >= count) {
      this.loadingType = 2;
    } else {
      this.loadingType = 0;
    }
    this.count = count;
    if (this.listQuery.page === 1) {
      this.commentList = list;
    } else {
      this.commentList = [...this.commentList, ...list];
    }
  }
  /**
   * @description: 加载更多
   * @return {*}
   */
  loading() {
    this.listQuery.page++;
    this.getCommentList();
  }
}
</script>
<style scoped lang="scss">
.comment-view {
  .form-box {
    background: #ecf0ff;
    text-align: right;
    border-radius: 4px;
    padding: 15px;
    /deep/ .el-textarea {
      .el-textarea__inner {
        background: transparent;
        border: 0;
        font-size: 14px;
        color: #000;
        height: 80px;
        padding: 0;
      }
    }
    .el-button {
      margin-top: 15px;
    }
  }
  .item-form-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    background: #ecf0ff;
    border-radius: 4px;
    padding: 12px;
    /deep/ .el-input {
      &__inner {
        background: #fff;
        border: 0;
        font-size: 14px;
        color: #000;
        padding: 0 12px;
      }
    }
    .el-button {
      margin-left: 12px;
    }
  }
  .comment-form {
    margin-top: 20px;
  }
  .comment-ct {
    margin-top: 20px;
    .tit {
      position: relative;
      padding-left: 20px;
      font-size: 24px;
      font-weight: 600;
      @media (max-width: 767px) {
        font-size: 20px;
      }
      @media (min-width: 768px) and (max-width: 991px) {
        font-size: 22px;
      }
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 6px;
        height: 100%;
        background: #1347f2;
      }
    }
    .comment-list {
      .item {
        display: flex;
        margin-top: 18px;
        .left-avatar {
          flex: 0 0 40px;
          height: 40px;
          margin-right: 8px;
          cursor: pointer;
        }
        .right-info {
          flex: 1;
          &::after {
            content: "";
            display: block;
            height: 1px;
            background: #e4eaff;
            margin-top: 18px;
          }
          .person {
            // line-height: 30px;
            .name-time {
              display: flex;
              align-items: center;
              .name {
                text-decoration: none;
                color: #333;
                font-size: 16px;
                font-weight: bold;
                margin-right: 4px;
                cursor: pointer;
              }
              /deep/ .svg-icon {
                width: 16px;
                height: 16px;
              }
              /deep/.el-tag {
                // margin: 0 8px;
                margin-left: 8px;
              }
              .reply {
                font-size: 14px;
                color: #333333;
                span {
                  color: #cccccc;
                  margin: 0 6px;
                }
              }
              .time {
                font-size: 14px;
                color: #ccc;
                padding-left: 10px;
              }
            }
          }
          .info {
            margin: 5px 0 12px;
            font-size: 16px;
            color: #707070;
          }
          /deep/ .item-operation {
            .tag {
              padding: 1px 8px;
              border-radius: 4px;
              border: 1px solid #1347f2;
              font-size: 14px;
              color: #1347f2;
              @media (max-width: 1199px) {
                font-size: 12px;
              }
              &.active {
                border: 1px solid #52c41a;
                color: #52c41a;
              }
            }
          }
          .form-box {
            margin-top: 10px;
          }
        }
      }
    }
    .children-list {
      .item {
        .right-info {
          &::after {
            display: none;
          }
        }
        .person {
          line-height: 22px;
        }
        .info {
          margin: 10px 0 10px;
        }
        .left-avatar {
          flex: 0 0 26px;
          height: 26px;
          margin-right: 5px;
          cursor: pointer;
        }
      }
      .link {
        margin-top: 10px;
      }
    }
    .btn-box {
      margin-top: 20px;
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>

接口数据处理：可直接赋值给commentList看静态效果

[
  {
    id: 37,
    pid: 0,
    memberId: 100020,
    content: "写的太烂了。。。",
    beMemberId: 100014,
    beNickname: "cz6",
    releaseTime: "2022-06-14 11:25",
    nickname: "xxx名字",
    avatar:
      "https://xchlwkj.oss-cn-shenzhen.aliyuncs.com/2022/05/13/member-default-avatar.png.png",
    isExpert: 1,
    isAuthor: 2,
    isGive: 2,
    giveCount: 0,
    level: 1,
    children: [
      {
        id: 66,
        pid: 37,
        memberId: 100014,
        content: "瞎说什么大实话",
        beMemberId: 100020,
        beNickname: "xxx名字",
        releaseTime: "1小时前",
        nickname: "cz6",
        avatar:
          "https://thirdwx.qlogo.cn/mmopen/vi_32/mtPRUG9a4Ond75av9Rb0kibxLwNebGxeveCFM3M4v4XE59NIHYAPGkquld3mQ18QWic08MOrzQhBPZibMlLrTBGsQ/132",
        isExpert: 1,
        isAuthor: 1,
        isGive: 2,
        giveCount: 0,
        level: 2,
        children: [],
      },
      {
        id: 55,
        pid: 37,
        memberId: 100014,
        content: "xxx0614编辑",
        beMemberId: 100014,
        beNickname: "cz6",
        releaseTime: "2022-06-14 16:06",
        nickname: "cz6",
        avatar:
          "https://thirdwx.qlogo.cn/mmopen/vi_32/mtPRUG9a4Ond75av9Rb0kibxLwNebGxeveCFM3M4v4XE59NIHYAPGkquld3mQ18QWic08MOrzQhBPZibMlLrTBGsQ/132",
        isExpert: 1,
        isAuthor: 1,
        isGive: 2,
        giveCount: 0,
        level: 2,
        children: [],
      },
    ],
  },
  {
    id: 36,
    pid: 0,
    memberId: 100014,
    content: "写的不错",
    beMemberId: 100014,
    beNickname: "cz6",
    releaseTime: "2022-06-14 11:22",
    nickname: "cz6",
    avatar:
      "https://thirdwx.qlogo.cn/mmopen/vi_32/mtPRUG9a4Ond75av9Rb0kibxLwNebGxeveCFM3M4v4XE59NIHYAPGkquld3mQ18QWic08MOrzQhBPZibMlLrTBGsQ/132",
    isExpert: 1,
    isAuthor: 1,
    isGive: 1,
    giveCount: 1,
    level: 1,
    children: [
      {
        id: 41,
        pid: 36,
        memberId: 100012,
        content: "cz6YYDS",
        beMemberId: 100014,
        beNickname: "cz6",
        releaseTime: "2022-06-14 11:35",
        nickname: "不可思议",
        avatar:
          "https://xchlwkj.oss-cn-shenzhen.aliyuncs.com/2022/05/13/member-default-avatar.png.png",
        isExpert: 2,
        isAuthor: 2,
        isGive: 2,
        giveCount: 0,
        level: 2,
        children: [],
      },
    ],
  },
];

Vue.js实现文章评论和回复评论功能
10-19
主要为大家详细介绍了Vue.js实现文章评论和回复评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 移动端 实战八 文章评论 评论列表组件、点赞、发布评论、评论回复等、Vue依赖注入方法、解决列表重复数据问题和不重新获取数据问题
m0_55170432的博客
06-25 3809
1.0 展示文章评论列表 1.1 准备组件 为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。 1、创建 src/views/article/components/article-comment.vue <template> <div class="article-comments"> <!-- 评论列表 --> <van-list v-model="loading" :finished="finishe
vue实现【简洁版软键盘】的封装以及调用
weixin_50450473的博客
02-24 6028
一、创建组件Keyboard.vue
vue3评论组件
web
05-01 9419
vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。
【Vue3组件】分享一下自己写的简约风格评论区组件(7.31更新回复控制和作者标识)
温的打怪之旅
06-23 2066
此组件旨在创建一个具备嵌套回复能力的通用评论区域，适用于构建动态、互动性强的用户讨论场景。userImg: string - 用户头像URLuserName: string - 用户名time: string - 评论时间戳（如 “17小时前”）content: string - 评论内容ReplyData: Array - 子评论集合ReplyuserImg1: string - 回复者头像URLuserName1: string - 回复者用户名userImg2。
Vue---评论组件
weixin_44438307的博客
10-08 186
## 评论子组件的封装和引用 1. 在 项目的 创建`src -> sub-components` 目录； 2. 创建一个标准的vue组件，命名为 `Comment.vue`， 作为我们的评论子组件 3. 哪个页面需要引用这个评论组件了，就在页面的 script 节点中，通过 import 的形式，导入此组件 4. 在 页面的 script 中，通过 `components`属性注册导...
Vue-移动端项目（8）
魔法革1996
12-15 1329
八、文章评论 展示文章评论列表 准备组件 为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。 1、创建 src/views/article/components/article-comment.vue <template> <div class="article-comments"> <!-- 评论列表 --> <van-list v-model="loading" :finished="fi
pHp封装成vue,vue封装第三方插件并发布到npm实例
weixin_42356315的博客
03-09 285
本文主要和大家介绍了vue封装第三方插件并发布到npm的方法，主要说明如何把第三方的插件封装成vue插件，简化配置，一键安装，主要提供思路，封装方法大同小异·，文章略长要有耐心。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。gitmentgitment是一个基于github issues封装的评论插件，以这个插件作为演示，把它封装成vue插件。vue...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
背心的博客
10-16 6529
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
vue3评论回复功能
m0_45215325的博客
03-28 3764
简单的实现了页面布局，点击回复等小功能（删除数据和回复添加到数组中目前没有写，因为项目要求后面需要对接后端接口，所以就懒得写了）代码中很多小细节没有处理，比如只写了删除的样式，没有写功能，时间没有写用v-for遍历，直接写死的，可能是我太懒了，哈哈哈哈。自我感觉该有的功能还是挺全面的，虽然样式略显粗糙，css样式写的稍许凌乱，部分代码因为项目需要，所以懒得精简。运用的是vue3+ts，文本框和小图标使用的是ant-design-vue框架。子组件CommentList。
vue3setup标签语法 + vite + delfin 递归组件实现无限评论功能
qq_54753561的博客
08-18 1175
对进行的评论可以无限进行回复（递归组件和数据tree处理）根据不同的人名可以进行评论（tap切换）localStorage 本地存储的使用。1、定义tab结构作为评论的人名切换。
多级留言/评论的功能实现——Vue3前端篇
道阻且长 心态要好
05-25 6462
使用vue3对多级留言的功能前端实现
Vue3：简单的评论弹窗实现
风不归的乐园
12-07 907
Vue3：简单的评论弹窗实现
VUE3：封装一个评论回复组件
最新发布
读心悦
04-28 1126
在React中，activeReplyId和comments状态提升到主组件，Vue中同样需要将这些状态放在父组件中，通过props传递给子组件，或者使用provide/inject，但props更直接。在Vue中，组件需要能够引用自身，所以需要在组件内部使用name属性，比如name: ‘CommentItem’，然后在模板中使用来递归渲染子评论。总结步骤：转换React组件结构到Vue3的单文件组件，处理响应式状态，转换事件处理机制，确保递归渲染正常工作，调整样式，提供使用示例和props验证。
闲来无事3 — vue3实现自己的无限评论组件(1)
2301_79158740的博客
01-06 2633
⚠️说明：本次组件使用的是纯静态数据，没有实现后端接口。需要前后端联调的，需要自己实现后端接口自己也是从零开始写组件，并且写博客。所以本文章，将详细记录自己解决问题的全过程。
vue评论回复组件
热门推荐
bright的博客
12-15 1万+
vue评论回复组件 1.使用下面命令下载hbl-comment组件 npm i bright-comment 2、下载完成之后在项目中引入 import comment from 'bright-comment' components:{ comment }, 3、使用 <comment></comment> 4、如果没有下载element-ui的使用下面命令进行下载 npm i element-ui -S 5、下载完成后在main.js中引入 import Ele
vue3+ts 开发系统 -- 评论列表
qq_45428582的博客
02-08 1182
写评论组件，希望实现失焦时评论回复框折叠 如图所示 问题：如何使得Comment组件失焦时，回复面板折叠？ 监听textarea的blur，在点击提交按钮时，会直接执行面板折叠操作，从而导致未执行提交评论方法。 监听外部div的blur事件。div 无focus,blur 事件，查找了下资料，提到，设置tabIndex 属性为0，css中outline为none，tabIndex为tab键聚焦顺序，默认值为-1,即无聚焦事件。详情参考MDN tabIndex。但回复面板内部有输入框，当内部输入框聚焦时将.
【vue组件】简单留言板 可回复 可点赞 无@
loyd3的博客
08-09 4100
使用vue.js实现的留言板组件。
vue 实现评论组件-下面是封装好的组件
weixin_51127384的博客
07-25 2664
上面是效果图废话不说上代码。
Vue3电商项目实战-商品详情模块7【21-商品详情-评价组件-头部渲染、22-商品详情-评价组件-实现列表】
m0_52896752的博客
02-26 1028
Vue3电商项目实战-商品详情模块7【21-商品详情-评价组件-头部渲染、22-商品详情-评价组件-实现列表】
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值