mz-tn-comment-list

图鸟 UI vue3 uniapp Plugins - 评论列表

Tuniao UI vue3官方仓库

该组件一般用于展示评论信息

组件安装

npm i tnuiv3p-tn-comment-list

组件位置

tnuiv3p-tn-comment-list/index.vue

平台差异说明

基础使用

• 通过data属性传入评论列表数据

<script setup lang="ts">
import { ref } from 'vue'
import type { TnCommentListData } from 'tnuiv3p-tn-comment-list'

const commentList = ref<TnCommentListData>([
  {
    id: 1,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
    nickname: '图鸟用户1',
    date: '07-22',
    position: '广东',
    content: '这是一条来自图鸟用户1的评论',
    likeActive: false,
    likeCount: 0,
    dislikeActive: false,
    disabledReply: false,
    allowDelete: false,
    commentCount: 3,
  },
  {
    id: 2,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
    nickname: '图鸟用户2',
    date: '07-22',
    position: '广东',
    content: '这是一条来自图鸟用户2的评论',
    likeActive: true,
    likeCount: 1,
    dislikeActive: false,
    disabledReply: false,
    allowDelete: false,
    commentCount: 2,
  },
])
</script>

<template>
  <TnCommentList :data="commentList" />
</template>

对评论列表的增删查操作

评论列表查看更多操作

• 通过show-more事件可以监听到用户点击了评论列表的查看更多按钮，该事件返回的参数中包含了当前点击的评论的id，可以通过该id去请求该评论的回复列表；currentCommentCount可以获取当前已展示的评论数量

• 通过调用TnCommentList内部addCommentData函数添加数据，该函数接收需要添加回复数据的评论id和评论列表数据的参数

<script setup lang="ts">
import { ref } from 'vue'
import type {
  TnCommentListInstance,
  TnCommentListItem,
  TnShowMoreCommentParams,
} from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const showMoreClickHandle = ({ id }: TnShowMoreCommentParams) => {
  // 通过id去请求该评论的回复列表
  // ...
  const commentData: TnCommentListItem = [
    {
      id: 3,
      avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
      nickname: '图鸟用户3',
      date: '07-23',
      position: '广东',
      content: '这是一条来自图鸟用户3的评论',
      likeActive: false,
      likeCount: 0,
      dislikeActive: false,
      disabledReply: false,
      allowDelete: false,
      commentCount: 3,
      images:['https://mz-xiaoyuanqiang.oss-cn-shenzhen.aliyuncs.com/static/images/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg','https://mz-xiaoyuanqiang.oss-cn-shenzhen.aliyuncs.com/static/images/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg']
      comment: [
        {
          id: 5,
          avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
          nickname: '图鸟用户5',
          date: '07-23',
          position: '广东',
          content: '这是一条来自图鸟用户5的评论',
          likeActive: false,
          likeCount: 0,
          dislikeActive: false,
          disabledReply: false,
          allowDelete: false,
          images:['https://mz-xiaoyuanqiang.oss-cn-shenzhen.aliyuncs.com/static/images/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg','https://mz-xiaoyuanqiang.oss-cn-shenzhen.aliyuncs.com/static/images/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg']
        },
      ],
    },
    {
      id: 4,
      avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
      nickname: '图鸟用户4',
      date: '07-23',
      position: '广东',
      content: '这是一条来自图鸟用户4的评论',
      likeActive: false,
      likeCount: 0,
      dislikeActive: false,
      disabledReply: false,
      allowDelete: false,
    },
  ]
  commentListRef.value?.addCommentData(id, commentData)
}
</script>

<template>
  <TnCommentList :data="commentList" @show-more="showMoreClickHandle" />
</template>

添加单条评论操作

• 通过reply事件可以监听点击了评论的回复操作，该事件返回的参数中包含了当前点击评论的id和待回复的用户名称nickname

• 通过调用TnCommentList的addCommentReply函数添加单条评论数据，该函数接收需要添加到的评论的id和评论数据的参数

<script setup lang="ts">
import { ref } from 'vue'
import type {
  TnCommentListInstance,
  TnReplyCommentParams,
} from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const replyClickHandle = ({ id }: TnReplyCommentParams) => {
  // 通过id添加评论到数据库中
  // ...
  commentListRef.value?.addCommentReply(id, {
    id: 10,
    avatar: 'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
    nickname: '图鸟用户6',
    date: '07-24',
    position: '广东',
    content: '这是一条来自图鸟用户6的评论',
    allowDelete: true,
  })
}
</script>

<template>
  <TnCommentList :data="commentList" @reply="replyClickHandle" />
</template>

删除评论操作

• 通过delete事件可以监听到用户点击了评论的删除按钮，该事件返回的参数中包含了当前点击的评论的id，可以通过该id去请求删除该评论

• 如果需要显示删除按钮，需要在数据参数中设置allowDelete为true

• 通过调用TnCommentList的deleteCommentReply函数删除评论，该函数接受评论的id

<script setup lang="ts">
import { ref } from 'vue'
import type { TnCommentListInstance } from 'tnuiv3p-tn-comment-list'
// ...列表数据定义...

const commentListRef = ref<TnCommentListInstance>()

const deleteClickHandle = (id: string | number) => {
  // 通过id从数据库中删除评论
  // ...
  commentListRef.value?.deleteCommentReply(id)
}
</script>

<template>
  <TnCommentList :data="commentList" @delete="deleteClickHandle" />
</template>

API

Props

Emits

Expose

TnCommentListItem

TnCommentListData = TnCommentListItem[]

TnReplyCommentParams

TnShowMoreCommentParams

TnReplyCommentData