tnuiv3p-tn-graphic-card v1.0.15

图鸟 UI vue3 uniapp Plugins - 图文卡片

Tuniao UI vue3官方仓库

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

组件安装

npm install tnuiv3p-tn-graphic-card

组件位置

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

平台差异说明

基础使用

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

只有avatar、title、description为必填项，其他都为选填项

<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-view、show-comment、show-like属性为true，则显示对应的状态，否则不显示

设置active-show、active-comment、active-like属性为true，则显示对应的状态为激活状态，否则为未激活状态

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

<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-user为false则不显示浏览用户的头像信息

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

<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

Slots

Events