mz-tn-comment-list

v2.0.0

Published

6 months ago

二次开发自用第三方组件

Downloads

0High
0Medium
0Low

wudibaolong

jiajingran

tn tuniao tuniao-ui 图鸟 uniapp uniapp插件

图鸟 UI vue3 uniapp Plugins - 评论列表

Tuniao UI vue3官方仓库

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

组件安装

npm i tnuiv3p-tn-comment-list

组件位置

tnuiv3p-tn-comment-list/index.vue

平台差异说明

| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... | | :------: | :-: | :--------: | :----------: | :----: | | √ | √ | √ | √ | 适配中 |

基础使用

通过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

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | | ------------------------- | ---------------- | ----------------- | ------------ | ------------------------------------------------------------ | | data | 评论列表 | TnCommentListData | [] | - | | show-like | 显示点赞图标 | Boolean | true | false | | show-dislike | 显示点踩图标 | Boolean | true | false | | like-icon | 点赞图标 | String | like | 图标有效值 | | active-like-icon | 激活后的点赞图标 | String | like-fill | 图标有效值 | | like-icon-color | 点赞图标默认颜色 | String | tn-gray-dark | 颜色有效值 | | active-like-icon-color | 点赞图标激活颜色 | String | tn-red | 颜色有效值 | | dislike-icon | 点踩图标 | String | like-break | 图标有效值 | | active-dislike-icon | 激活后的点踩图标 | String | like-fill | 图标有效值 | | dislike-icon-color | 点踩图标默认颜色 | String | tn-gray-dark | 颜色有效值 | | active-dislike-icon-color | 点踩图标激活颜色 | String | tn-gray-dark | 颜色有效值 |

Emits

| 事件名 | 说明 | 类型 | | --------- | ------------ | ------------------------------------------- | | like | 点赞事件 | (id: string \| number) => void | | dislike | 点踩事件 | (id: string \|number) => void | | reply | 回复事件 | (params: TnReplyCommentParams) => void | | delete | 删除事件 | (id: string \|number) => void | | show-more | 查看更多事件 | (params: TnShowMoreCommentParams) => void |

Expose

| 函数名 | 说明 | 类型 | | ------------------ | ------------ | ---------------------------------------------------------- | | addCommentData | 添加评论 | (id: string \| number, data: TnCommentListData) => void | | addCommentReply | 添加评论回复 | (id: string \| number, data: TnReplyCommentData) => void | | deleteCommentReply | 删除评论回复 | (id: string \| number) => void |

TnCommentListItem

| 参数 | 类型 | 说明 | 必填 | | ------------- | ------------------- | -------------- | ---- | | id | string | number | 评论id | 是 | | avatar | string | 用户头像 | 是 | | nickname | string | 用户名 | 是 | | date | string | 评论日期 | 是 | | position | string | 评论所在所属地 | 是 | | content | string | 评论内容 | 是 | | likeActive | boolean | 激活点赞操作 | 是 | | likeCount | number | 点赞数量 | 是 | | dislikeActive | boolean | 激活点踩操作 | 是 | | disabledReply | boolean | 禁止评论 | 是 | | allowDelete | boolean | 允许删除 | 是 | | commentCount | number | 总评论数据条数 | 否 | | comment | TnCommentListItem[] | 子评论数据 | 否 |

TnCommentListData = TnCommentListItem[]

TnReplyCommentParams

| 参数 | 类型 | 说明 | | -------- | ---------------- | -------------------------- | | id | string | number | 评论id | | nickname | string | 正在回复评论所属用户的名称 |

TnShowMoreCommentParams

| 参数 | 类型 | 说明 | | ------------------- | ---------------- | -------------------- | | id | string | number | 评论id | | currentCommentCount | number | 当前已显示的评论数量 |

TnReplyCommentData

| 参数 | 类型 | 说明 | 必填 | | ------------- | ---------------- | -------------- | ---- | | id | string | number | 评论id | 是 | | avatar | string | 用户头像 | 是 | | nickname | string | 用户名 | 是 | | date | string | 评论日期 | 是 | | position | string | 评论所在所属地 | 是 | | content | string | 评论内容 | 是 | | allowDelete | boolean | 允许删除 | 是 | | disabledReply | boolean | 禁止回复 | 是 |