Tuniao UI Uniapp V3

Appearance

12:13

图鸟 UI vue3 uniapp 插件 - 评论列表 ​

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

仓库地址 ​

Github

npmjs

组件安装 ​

bash
npm i tnuiv3p-tn-comment-list
npm i tnuiv3p-tn-comment-list
bash
pnpm add tnuiv3p-tn-comment-list
pnpm add tnuiv3p-tn-comment-list
bash
yarn i tnuiv3p-tn-comment-list
yarn i tnuiv3p-tn-comment-list

组件位置 ​

typescript
import TnCommentList from 'tnuiv3p-tn-comment-list/index.vue'
import TnCommentList from 'tnuiv3p-tn-comment-list/index.vue'

平台差异说明 ​

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

基础使用 ​

  • 通过data属性传入评论列表数据
vue
<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>
<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和评论列表数据的参数

vue
<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,
      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,
        },
      ],
    },
    {
      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>
<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,
      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,
        },
      ],
    },
    {
      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和评论数据的参数

vue
<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>
<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

vue
<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>
<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显示点赞图标Booleantruefalse
show-dislike显示点踩图标Booleantruefalse
like-icon点赞图标Stringlike图标有效值
active-like-icon激活后的点赞图标Stringlike-fill图标有效值
like-icon-color点赞图标默认颜色Stringtn-gray-dark颜色有效值
active-like-icon-color点赞图标激活颜色Stringtn-red颜色有效值
dislike-icon点踩图标Stringlike-break图标有效值
active-dislike-icon激活后的点踩图标Stringlike-fill图标有效值
dislike-icon-color点踩图标默认颜色Stringtn-gray-dark颜色有效值
active-dislike-icon-color点踩图标激活颜色Stringtn-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 ​

参数类型说明必填
idstring | number评论 id是
avatarstring用户头像是
nicknamestring用户名是
datestring评论日期是
positionstring评论所在所属地是
contentstring评论内容是
likeActiveboolean激活点赞操作是
likeCountnumber点赞数量是
dislikeActiveboolean激活点踩操作是
disabledReplyboolean禁止评论是
allowDeleteboolean允许删除是
commentCountnumber总评论数据条数否
commentTnCommentListItem[]子评论数据否

TnCommentListData = TnCommentListItem[] ​

TnReplyCommentParams ​

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

TnShowMoreCommentParams ​

参数类型说明
idstring | number评论 id
currentCommentCountnumber当前已显示的评论数量

TnReplyCommentData ​

参数类型说明必填
idstring | number评论 id是
avatarstring用户头像是
nicknamestring用户名是
datestring评论日期是
positionstring评论所在所属地是
contentstring评论内容是
allowDeleteboolean允许删除是
disabledReplyboolean禁止评论是

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI