【Vue3组件】分享一下自己写的简约风格评论区组件(7.31更新回复控制和作者标识)

已于 2024-07-31 16:01:06 修改
阅读量702 收藏 5
点赞数 5
文章标签： 前端 vue.js
于 2024-06-23 09:43:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53270554/article/details/139893694
版权

2024/7/31更新，新增了组件回复框的追踪控制，采用provide / inject实现

引用时需要在顶层组件生成一个追踪变量和更新方法

组件内部 **postReply** 方法是发表评论接口示例，请根据自己的项目需要，自行变更修改接口

const activeReplyId = ref<number | null>(null);
const setActiveReplyId = (id: number | null) => activeReplyId.value = id;
provide('activeReplyId', activeReplyId);
provide('setActiveReplyId', setActiveReplyId);

2024/6/23发布
此组件旨在创建一个具备嵌套回复能力的通用评论区域，适用于构建动态、互动性强的用户讨论场景

代码比较简单，方便大家二次开发，旨在快速提供基础的样式模板，自行迭代定制

2024/7/31预览

在这里插入图片描述

2024/6/23预览

在这里插入图片描述

简介

！！！！！！！！注意！！！！！！！！！

父组件需要采用provide全层级传递两个方法才能正常处理回复框

const activeReplyId = ref<number | null>(null);
const setActiveReplyId = (id: number | null) => activeReplyId.value = id;
provide('activeReplyId', activeReplyId);
provide('setActiveReplyId', setActiveReplyId);

  • 通用评论组件

  • 组件功能
  • 此组件旨在创建一个具备嵌套回复能力的通用评论区域，适用于构建动态、互动性强的用户讨论场景。
  • 接收数据结构
  • 组件通过 Props 接收数据，数据模型设计详细描述了评论及其嵌套回复的所有必要信息。
  • @property {Array} data - 评论列表
  • Comment 类型定义
    • userImg: string - 用户头像URL
    • userName: string - 用户名
    • time: string - 评论时间戳（如 “17小时前”）
    • content: string - 评论内容
    • ReplyData: Array - 子评论集合
  • Reply 类型定义
    • userImg1: string - 回复者头像URL
    • userName1: string - 回复者用户名
    • userImg2: string - 被回复者头像URL（可选）
    • userName2: string - 被回复者用户名（可选）
    • replytime: string - 回复时间
    • replycontent: string - 回复内容
    • anthTags: number - 回复者身份标识
    • 0: 无特殊身份
    • 1: 回复者为原贴作者
    • 2: 被回复者为原贴作者
    • 3: 原贴作者回复原贴作者

  • 示例数据说明

  • 提供的数据结构实例展示了如何组织顶级评论及其关联的回复数据，以便于组件正确解析并渲染。

  • 使用提示

    • 确认传递给组件的数据严格遵循上述结构，以确保界面的正确显示。
    • 利用Vue 3的Composition API特性，可以进一步优化状态管理和逻辑处理。

代码

父组件


<template>
    <div class="firstglobals">
        <!-- 头像 -->
        <div class="avatar">
            <img :src="data.userImg" style="width: 56px; height: 56px; border-radius: 50%;" alt="" />
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="usertop">
                <div style="display: flex;gap: 10px;">
                    <div class="username">{{ data.userName }}</div>
                    <div class="tags" v-if="data.tag === 1">
                        作者
                    </div>
                </div>

                <div class="time">{{ data.time }}</div>
            </div>

            <div style="display: flex; flex-direction: column; margin-top: 1em;">
                <div class="text">{{ data.content }}</div>
                <div style="display: flex; align-self: flex-end;">
                    <img src="@/assets/globals/点赞默认.png" style="width: 20px;" alt="" />
                </div>
                <div class="but" @click="toggleReplyBox(data.id)">回复</div>
            </div>
            <div v-if="isReplyBoxVisible" class="reply-box">
                <textarea v-model="replyContent" placeholder="输入你的回复..." rows="3"></textarea>
                <button @click="submitReply(data.id)" v-loading='isLoading'>发布</button>
            </div>
            <!-- 回复组件 -->
            <div>
                <div v-for="(item, index) in displayedReplies" :key="index">
                    <LuxCommentSectionItem :dataCode="dataCode" :replyData="item"
                        @PostsubmitReply="handleSubmitReply" />
                </div>
                <div v-if="!showAllReplies && data.ReplyData.length > 2" class="load-more"
                    @click="showAllReplies = true">
                    加载更多回复 ...
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, inject, Ref, defineEmits, onMounted } from 'vue';
import LuxCommentSectionItem from '@/components/currency/LuxCommentSectionItem.vue';
import { postReply } from '@/axios/commentApi/comment';

interface ReplyData {
    userImg1: string,
    userName1: string,
    userImg2: string,
    userName2: string,
    replytime: string,
    replycontent: string,
    anthTags: any,
    id: any
}

interface CommentData {
    userImg: string;
    userName: string;
    time: string;
    content: string;
    ReplyData: ReplyData[];
    id: any;
    tag?:any
}


const emits = defineEmits(['PostsubmitReply']);
const handleSubmitReply = () => {
    emits("PostsubmitReply")
}

const props = defineProps<{
    data: CommentData;
    dataCode?: number
}>();

const isLoading = ref(false);
const showAllReplies = ref(false);
const replyContent = ref('');

const activeReplyId = inject<Ref<number | null>>('activeReplyId', ref(null));
const setActiveReplyId = inject<Function>('setActiveReplyId');

const isReplyBoxVisible = computed(() => activeReplyId?.value === props.data.id);

const toggleReplyBox = (id: any) => {
    if (setActiveReplyId) {
        activeReplyId.value === id ? setActiveReplyId(null) : setActiveReplyId(id);
    }
};

const displayedReplies = computed(() => {
    if (showAllReplies.value || props.data.ReplyData.length <= 2) {
        return props.data.ReplyData;
    } else {
        return props.data.ReplyData.slice(0, 2);
    }
});

const submitReply = (id: string) => {
    if (replyContent.value.trim()) {
        // 在这里处理回复的提交逻辑，例如发送请求到服务器或更新本地数据
        console.log('提交的回复内容:', replyContent.value);
        // 提交后关闭回复框
        isLoading.value = true;
        postReply(
            {
                "code": props.dataCode,
                "comments": replyContent.value,
                "pid": id
            }
        ).then(res => {
            activeReplyId.value = null;
            replyContent.value = '';
            isLoading.value = false;
            // @ts-ignore
            ElMessage.success('回复成功');
            emits("PostsubmitReply")
        }).catch(err => {
            activeReplyId.value = null;
            replyContent.value = '';
            isLoading.value = false;
        });

    } else {
        // @ts-ignore
        ElMessage.error('请输入回复内容');
        isLoading.value = false;
    }
};

onMounted(() => {
console.log("评论数据",props.data.ReplyData);
});
</script>

<style scoped>
.but {
    width: 60px;
    padding: 5px 0px;
    background: #f1f1f1;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-content: center;
    font-weight: 400;
    font-size: 14px;
    color: #0f1014;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.tags {
    width: 32px;
    height: 18px;
    background: #0F1014;
    border-radius: 4px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.but:hover {
    background: #ebe4e4;
}

.text {
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 21px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.time {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 14px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.avatar {
    width: 56px;
    height: 56px;
    border-radius: 30px;
}

.usertop {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.username {
    font-weight: 700;
    font-size: 16px;
    color: #0f1014;
    line-height: 19px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.content {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
    margin-top: 10px;
    flex: 1;
}

.firstglobals {
    display: flex;
    justify-content: start;
    margin-top: 2em;
}

.load-more {
    margin-top: 30px;
    margin-left: 2em;
    color: #0066cc;
    cursor: pointer;
    font-size: 14px;
}

.load-more:hover {
    text-decoration: underline;
}

.reply-box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: end;
    position: relative;
    width: 98%;
    align-self: flex-end;
}

.reply-box textarea {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    resize: none;
    outline: none;
}

.reply-box button {
    align-self: flex-end;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    background-color: #070707;
    color: white;
    cursor: pointer;

}

.reply-box button:hover {
    background-color: #2d2d2d;
}
</style>

子组件

<template>
  <div class="reply-comments">
    <div class="top-user">
      <div style="display: flex; justify-content: center; align-content: center; gap: 8px;">
        <img :src="replyData.userImg1" style="width: 24px; height: 24px; border-radius: 50%;" alt="">
        <span class="username">{{ replyData.userName1 }}</span>
      </div>

      <div class="tags" v-if="replyData.anthTags === 1 || replyData.anthTags === 3">
        作者
      </div>

      <div class="hf">
        回复
      </div>

      <div style="display: flex; justify-content: center; align-content: center; gap: 8px;">
        <img :src="replyData.userImg2" style="width: 24px; height: 24px; border-radius: 50%;" alt="">
        <span class="username">{{ replyData.userName2 }}</span>
      </div>

      <div class="tags" v-if="replyData.anthTags === 2 || replyData.anthTags === 3">
        作者
      </div>

      <div class="time">
        {{ replyData.replytime }}
      </div>
    </div>

    <div class="content">
      {{ replyData.replycontent }}
    </div>

    <div style="display: flex; align-self: flex-end;">
      <img src="@/assets/globals/点赞默认.png" style="width: 20px;" alt="">
    </div>

    <div class="but" @click="toggleReplyBox">
      回复
    </div>

    <div v-if="isReplyBoxVisible" class="reply-box">
      <textarea v-model="replyContent" placeholder="输入你的回复..." rows="3"></textarea>
      <button @click="submitReply(replyData.id)" v-loading="isLoading">发布</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { postReply } from '@/axios/commentApi/comment';
import { ref, inject, computed, Ref, defineEmits, watch, onMounted } from 'vue';
const emits = defineEmits(['PostsubmitReply'])
interface ReplyData {
  userImg1: string,
  userName1: string,
  userImg2: string,
  userName2: string,
  replytime: string,
  replycontent: string,
  anthTags: number,
  id: number
}

const props = defineProps<{
  replyData: ReplyData;
  dataCode?: number;
}>();

const activeReplyId = inject<Ref<number | null>>('activeReplyId', ref(null));
const setActiveReplyId = inject<Function>('setActiveReplyId');

const replyContent = ref('');

const isReplyBoxVisible = computed(() => activeReplyId?.value === props.replyData.id);

const isLoading = ref(false);
const toggleReplyBox = () => {
  if (setActiveReplyId) {
    setActiveReplyId(isReplyBoxVisible.value ? null : props.replyData.id);
  }
};

const submitReply = (id: any) => {
  if (replyContent.value.trim()) {
    // 在这里处理回复的提交逻辑，例如发送请求到服务器或更新本地数据
    console.log('提交的回复内容:', replyContent.value);
    isLoading.value = true;
    // 提交后关闭回复框
    postReply(
      {
        "code": props.dataCode,
        "comments": replyContent.value,
        "pid": id
      }
    ).then(res => {
      activeReplyId.value = null;
      replyContent.value = '';
      isLoading.value = false;
      // @ts-ignore
      ElMessage.success('回复成功');
      emits("PostsubmitReply")
    }).catch(err => {
      activeReplyId.value = null;
      replyContent.value = '';
      isLoading.value = false;
    });

  } else {
    // @ts-ignore
    ElMessage.error('请输入回复内容');
  }
};

watch(() => props.replyData, (newValue) => {
  console.log('newValue', newValue.anthTags);
}, { deep: true });

onMounted(() => {
  console.log("newValue", props.replyData.anthTags);
});
</script>

<style scoped>
.but {
  width: 60px;
  padding: 5px 0px;
  background: #F1F1F1;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-content: center;
  font-weight: 400;
  font-size: 14px;
  color: #0F1014;
  margin-left: 32px;
  cursor: pointer;
}

.but:hover {
  background: #ebe4e4;
}

.content {
  font-weight: 400;
  font-size: 18px;
  color: #000000;
  line-height: 21px;
  text-align: left;
  margin-left: 32px;
  margin-top: 10px;
}

.time {
  font-weight: 400;
  font-size: 12px;
  color: #666666;
  line-height: 14px;
  text-align: left;
}

.hf {
  font-weight: 400;
  font-size: 14px;
  color: #B9B9B9;
  line-height: 16px;
  text-align: left;
}

.tags {
  width: 32px;
  height: 18px;
  background: #0F1014;
  border-radius: 4px;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.username {
  height: 24px;
  font-weight: 500;
  font-size: 13px;
  color: #0F1014;
  line-height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-comments {
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}

.reply-box {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: end;
  position: relative;
  width: 95%;
  align-self: flex-end;
}

.reply-box textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  resize: none;
  outline: none;
}

.reply-box button {
  align-self: flex-end;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  background-color: #070707;
  color: white;
  cursor: pointer;
}

.reply-box button:hover {
  background-color: #2d2d2d;
}
</style>
Luxine.
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用vue写一个评论组件
weixin_42593701的博客
02-09 435
写一个评论组件，可以使用 Vue 框架。您可以在 Vue 文件中编写模板，绑定数据并处理用户输入。 下面是一个简单的示例： <template> <div> <form @submit.prevent="submitComment"> <textarea v-model="newComment"></textarea&g...
一个用于回复发表评论的组件
09-07
这是封装了ueditor插件的一个 web前端组件，可用于回复发表之类的需求，访问地址：如http://127.0.0.1:28080/Microblog/index.html
dropd::high_voltage:React和Vue的零依赖简约下拉组件
05-14
:high_voltage: 用于React和Vue的零依赖的简约下拉组件。 :sparkles: 优点： :package: 〜6kb（压缩后，完整包装） :male_sign:‍:male_sign: 零依赖 :mobile_phone: 支持触摸设备 :hammer_and_pick: CommonJS和ES模块支持 :check_mark_button: 针对可访问性进行了优化 :rainbow: 易于定制 :unicorn: 针对性能进行了优化 :nail_polish: 更依赖JavaScript上CSS :wrench: 安装 安装完整的软件包（适用于Vue和React） :backhand_index_pointing_down: $ npm install dropd-component --save 或者 有关特定于框架的安装，请参见和 。 :open_book: 用法 :eyes: 例子 :high_voltage: :high_voltage: :construction_worker: 贡献 请参阅项目以获取要做的事情清
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
04-03
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
vue3评论组件
web
05-01 7284
vue评论组件，🔥基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点。
Vue.js实现文章评论和回复评论功能
01-19
本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。 先上在线demo：http://jsbin.com/ceqifo/1/edit?js,output 再上效果图 可直接评论，点击别人的评论能回复别人的评论。 html </
vue3评论回复功能
m0_45215325的博客
03-28 2927
简单的实现了页面布局，点击回复等小功能（删除数据和回复添加到数组中目前没有写，因为项目要求后面需要对接后端接口，所以就懒得写了）代码中很多小细节没有处理，比如只写了删除的样式，没有写功能，时间没有写用v-for遍历，直接写死的，可能是我太懒了，哈哈哈哈。自我感觉该有的功能还是挺全面的，虽然样式略显粗糙，css样式写的稍许凌乱，部分代码因为项目需要，所以懒得精简。运用的是vue3+ts，文本框和小图标使用的是ant-design-vue框架。子组件CommentList。
vue封装即引即用的评论组件
Twinkle_sone的博客
04-01 6199
说在前面 最近在搭建一个自己的博客网站，博客网站肯定少不了和读者的交流，因此需要一个评论模块来搭建起博主和读者的联系，在完成评论模块的时候顺手将其封装成了一个评论组件，在这里记录一下，也给大家简单分享一下，大家有什么好的建议都可以评论告诉我。 组件介绍 博客地址：http://jyeontu.xyz/JYeontuBlog/#/home 组件在博客中的展示如上图，博客链接也贴在了上面，感兴趣的同学可以进去体验看看效果，可以顺便给我留下几句祝福就更好了。 组件主要实现了以下几个功能： （1）数据转换 将扁平
Vue3：简单的评论弹窗实现
风不归的乐园
12-07 665
Vue3：简单的评论弹窗实现
Vue---评论组件
weixin_44438307的博客
10-08 92
## 评论子组件的封装和引用 1. 在 项目的 创建`src -> sub-components` 目录； 2. 创建一个标准的vue组件，命名为 `Comment.vue`， 作为我们的评论子组件 3. 哪个页面需要引用这个评论组件了，就在页面的 script 节点中，通过 import 的形式，导入此组件 4. 在 页面的 script 中，通过 `components`属性注册导...
vue之评论
weixin_47409897的博客
10-19 939
目录评论组件 artical.vue评论头部组件 CommentTitle.vue评论组件 Comment.vue二级评论组件 ComemntChild.vue 评论组件 artical.vue 功能： 先获取用户信息 获取文章 数据 获取评论数据 发表评论 发表评论后，调用子组件中的 获取最新评论方法 点击回复 拿到父评论的id 并且给评论的数据对象，添加父评论的id 点击回复的 时候 输入框聚焦 需要使用 ref 拿到子组件的节点 然后调用子组件中的 input表单节点下 使用focus方
20.（vue3.x+vite）Vue子组件和父组件执行顺序.rar
09-21
在Vue.js框架中，尤其是最新的3.x版本与Vite构建工具的结合，理解子组件和父组件的执行顺序是至关重要的。Vue的生命周期是每个组件从创建到销毁的过程，其中包括了初始化、挂载、更新和卸载等阶段。在父子组件的关系...
基于Vue3和TypeScript的日历日程组件设计源码
最新发布
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript...该项目是一个基于Vue3和TypeScript的日历日程组件，旨在提供一个高效、稳定的日程管理解决方案。
用Vue3写的目录组件，支持搜索过滤，展开收起
04-24
在本文中，我将分享一个用 Vue3 实现的自定义目录组件，探讨其设计思路和技术实现。 组件结构与功能 组件结构 目录组件主要由两个部分组成：目录头部和目录内容。目录头部显示目录的标题和展开/收起按钮，而目录...
vue3 表格组件封装复用
02-27
在Vue3中，组件封装是提高代码复用性和效率的关键技术。本项目专注于实现一个可编辑的表格组件，旨在帮助开发者更好地理解和应用Vue3的组件化思想，提升面试竞争力，并优化开发流程。以下是对这个表格组件封装过程的...
使用vant-ui+vue3实现一个可复用的评星组件
熟悉 vue2 vue3 jquery js echarts
05-11 372
如图所示 有两种情况 一种是5颗星 一种是3颗星。在全局注册了此组件(后续还会持续更新代码~)官网上只提供了图标类型的 并没有加文字。使用vant-ui+vue3实现一个可复用的评星组件
推荐使用：Vue Disqus - 简易集成Disqus评论组件
gitblog_00016的博客
05-26 435
推荐使用：Vue Disqus - 简易集成Disqus评论组件 项目地址:https://gitcode.com/ktquez/vue-disqus 在Web开发中，为用户提供互动性的评论系统是提高网站参与度的关键。今天，我们向您推荐一个专为Vue.js框架设计的开源组件——Vue Disqus，它使得在SPA（单页应用）和Vue 2.x应用程序中集成Disqus评论变得轻松简单。 1. 项目介...
用Vue.js写一个简约高级大气好看的音乐网站
05-03
Vue.js 是一个流行的 JavaScript 框架，用于构建单页面应用程序。要创建一个简约高级大气好看的音乐网站，您可以遵循以下步骤： 1. 设计UI界面 首先，您需要设计一个漂亮的用户界面。您可以使用 Adobe XD 或 Figma 等工具进行设计，并使用 CSS3 和 JavaScript 实现每个组件。 2. 安装Vue.js并创建项目 安装 Vue.js 并创建一个新的 Vue.js 项目。您可以使用 Vue CLI 或手动安装 Vue.js。 3. 添加音乐播放器 您可以使用第三方库，如 Vue-audio，来添加音乐播放器。 4. 获取音乐数据 您需要从音乐 API 中获取数据。您可以使用 Spotify API 或 SoundCloud API。 5. 在Vue.js中使用音乐数据 将音乐数据添加到 Vue.js 应用程序中，以便您可以在 UI 中显示音乐列表和音乐信息。 6. 创建音乐搜索功能 您可以使用第三方库，如 Vue InstantSearch 或 Vue.js 的响应式搜索功能，来创建音乐搜索功能。 7. 添加音乐播放列表 您可以创建一个播放列表组件，以便用户可以在应用程序中添加和删除音乐。 8. 集成社交媒体 添加社交媒体分享功能，以便用户可以分享他们喜欢的音乐。 9. 部署应用程序 将您的应用程序部署到云平台，如 Heroku 或 Firebase。 以上是创建一个简约高级大气好看的音乐网站的一些步骤。当然，具体实现中还有很多细节需要注意和实现。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值