Skip to content
12:13

TnGraphicCard-图文卡片

该组件一般用于展示图文简要的信息,让用户可以快速查看筛选数据。

仓库地址

Github

npmjs

安装方式

bash
npm i tnuiv3p-tn-graphic-card
npm i tnuiv3p-tn-graphic-card
bash
pnpm add tnuiv3p-tn-graphic-card
pnpm add tnuiv3p-tn-graphic-card
bash
yarn i tnuiv3p-tn-graphic-card
yarn i tnuiv3p-tn-graphic-card

组件位置

typescript
import TnGraphicCard from 'tnuiv3p-tn-graphic-card/index.vue'
import TnGraphicCard from 'tnuiv3p-tn-graphic-card/index.vue'

平台差异说明

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

基础使用

  • 通过avatar设置作者的头像
  • 通过title设置标题
  • 通过description设置描述
  • 通过tags设置内容的标签,传递一个字符串数组
  • 通过content设置文章的简要内容
  • 通过images设置文章的图片
  • 通过viewCount设置文章的浏览量
  • 通过commentCount设置文章的评论量
  • 通过likeCount设置文章的点赞量
  • 通过viewUserAvatars设置浏览用户的头像,传递一个头像 url 地址的字符串数组

只有avatartitledescription为必填项,其他都为选填项

vue
<script lang="ts" setup>
const graphicData = {
  id: 1,
  avatar: 'https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg',
  title: '文章标题',
  description: '2023年6月30日',
  tags: ['标签1', '标签2'],
  content:
    '看看打开打开年份记得当年开始放假哦额外欺骗人u饿哦漂亮放佛怕打雷舒服呢我脾气破费了发多少呢;否,可能打飞机哦喷泉哦怕可能地方打开螺丝粉年份的肌肤看能否。',
  images: [
    'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg',
  ],
  viewCount: 100,
  commentCount: 101,
  likeCount: 102,
  viewUserAvatars: [
    'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
  ],
}
</script>

<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
  />
</template>
<script lang="ts" setup>
const graphicData = {
  id: 1,
  avatar: 'https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg',
  title: '文章标题',
  description: '2023年6月30日',
  tags: ['标签1', '标签2'],
  content:
    '看看打开打开年份记得当年开始放假哦额外欺骗人u饿哦漂亮放佛怕打雷舒服呢我脾气破费了发多少呢;否,可能打飞机哦喷泉哦怕可能地方打开螺丝粉年份的肌肤看能否。',
  images: [
    'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg',
    'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg',
  ],
  viewCount: 100,
  commentCount: 101,
  likeCount: 102,
  viewUserAvatars: [
    'https://tnuiimage.tnkjapp.com/avatar/normal/1.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/2.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/3.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/4.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/5.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/6.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/7.png',
    'https://tnuiimage.tnkjapp.com/avatar/normal/8.png',
  ],
}
</script>

<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
  />
</template>

设置查看、评论、点赞的状态

设置show-viewshow-commentshow-like属性为true,则显示对应的状态,否则不显示

设置active-showactive-commentactive-like属性为true,则显示对应的状态为激活状态,否则为未激活状态

隐藏查看数据并且设置为已点赞

vue
<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
    :show-view="false"
    active-like
  />
</template>
<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
    :show-view="false"
    active-like
  />
</template>

设置显示最大显示浏览用户头像数量

设置max-view-user-avatar-count的值则当前显示的浏览用户头像数量不会超过该值

如果浏览用户数据为空或者设置了show-view-userfalse则不显示浏览用户的头像信息

设置最大显示浏览用户头像数量为 3

vue
<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
    :max-view-user-avatar-count="3"
  />
</template>
<template>
  <TnGraphicCard
    :avatar="graphicData.avatar"
    :title="graphicData.title"
    :description="graphicData.description"
    :tags="graphicData.tags"
    :content="graphicData.content"
    :images="graphicData.images"
    :view-count="graphicData.viewCount"
    :comment-count="graphicData.commentCount"
    :like-count="graphicData.likeCount"
    :view-user-avatars="graphicData.viewUserAvatars"
    :max-view-user-avatar-count="3"
  />
</template>

API

Props

属性名说明类型默认值可选值
avatar发布者头像地址String--
title标题String--
description描述String--
content内容String--
tags标签String[][]-
images图片列表String[][]-
tag-bg-color标签背景颜色,可以使用图鸟内置的背景色、hex、rgb、rgbaString--
tag-text-color标签文字颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-more显示右边更多操作区域Booleantruefalse
show-hot显示热度数量Booleantruefalse
active-hot是否激活热度Booleanfalsetrue
hot-count热度数量数据Number0-
hot-icon热度数量图标Stringflower图标有效值
active-hot-icon激活时热度数量图标Stringflower-fill图标有效值
hot-color热度数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-hot-color激活时热度数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-comment显示评论数量Booleantruefalse
active-comment是否激活评论Booleanfalsetrue
comment-count评论数量数据Number0-
comment-icon评论数量图标Stringcomment图标有效值
active-comment-icon激活时评论数量图标Stringcomment-fill图标有效值
comment-color评论数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-comment-color激活时评论数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-like显示点赞数量Booleantruefalse
active-like是否激活点赞Booleanfalsetrue
like-count点赞数量数据Number0-
like-icon点赞数量图标Stringlike图标有效值
active-like-icon激活时点赞数量图标Stringlike-fill图标有效值
like-color点赞数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
active-like-color激活时点赞数量图标颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
show-view-user显示查看用户头像信息Booleantruefalse
view-count实际查看数量数据Number0-
view-user-avatars查看用户头像列表String[][]-
max-view-user-avatar-count最大显示用户头像数量Number4-

Slots

插槽名说明
briefOperation顶部右边操作区域
bottomRight底部右边操作区域

Events

事件名说明类型
click图文卡片点击事件() => void
avatar-view-click发布者头像和查看数量点击事件() => void
more-click更多按钮点击事件() => void
hot-click热度数量点击事件() => void
comment-click评论数量点击事件() => void
like-click点赞数量点击事件() => void

Tuniao UI