201 lines
13 KiB
Markdown
201 lines
13 KiB
Markdown
# 图鸟 UI vue3 uniapp Plugins - 图文卡片
|
||
|
||
|
||
|
||
[Tuniao UI vue3官方仓库](https://github.com/tuniaoTech/tuniaoui-rc-vue3-uniapp)
|
||
|
||
该组件一般用于展示图文简要的信息，让用户可以快速查看筛选数据。
|
||
|
||
## 组件安装
|
||
|
||
```bash
|
||
npm install tnuiv3p-tn-graphic-card
|
||
```
|
||
|
||
## 组件位置
|
||
|
||
```typescript
|
||
import TnGraphicCard from 'tnuiv3p-tn-graphic-card/index.vue'
|
||
```
|
||
|
||
## 平台差异说明
|
||
|
||
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|
||
| :------: | :-: | :--------: | :----------: | :----: |
|
||
| √ | √ | √ | √ | 适配中 |
|
||
|
||
## 基础使用
|
||
|
||
- 通过`avatar`设置作者的头像
|
||
- 通过`title`设置标题
|
||
- 通过`description`设置描述
|
||
- 通过`tags`设置内容的标签，传递一个字符串数组
|
||
- 通过`content`设置文章的简要内容
|
||
- 通过`images`设置文章的图片
|
||
- 通过`viewCount`设置文章的浏览量
|
||
- 通过`commentCount`设置文章的评论量
|
||
- 通过`likeCount`设置文章的点赞量
|
||
- 通过`viewUserAvatars`设置浏览用户的头像，传递一个头像url地址的字符串数组
|
||
|
||
只有`avatar`、`title`、`description`为必填项，其他都为选填项
|
||
|
||
```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>
|
||
```
|
||
|
||
## 设置查看、评论、点赞的状态
|
||
|
||
设置`show-view`、`show-comment`、`show-like`属性为`true`，则显示对应的状态，否则不显示
|
||
|
||
设置`active-show`、`active-comment`、`active-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>
|
||
```
|
||
|
||
## 设置显示最大显示浏览用户头像数量
|
||
|
||
设置`max-view-user-avatar-count`的值则当前显示的浏览用户头像数量不会超过该值
|
||
|
||
如果浏览用户数据为空或者设置了`show-view-user`为`false`则不显示浏览用户的头像信息
|
||
|
||
#### 设置最大显示浏览用户头像数量为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>
|
||
```
|
||
|
||
## API
|
||
|
||
### Props
|
||
|
||
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|
||
| -------------------------- | ------------------------------------------------------------ | -------- | ------------ | ------------------------------------------------------------ |
|
||
| avatar | 发布者头像地址 | String | - | - |
|
||
| title | 标题 | String | - | - |
|
||
| description | 描述 | String | - | - |
|
||
| content | 内容 | String | - | - |
|
||
| tags | 标签 | String[] | [] | - |
|
||
| images | 图片列表 | String[] | [] | - |
|
||
| tag-bg-color | 标签背景颜色，可以使用图鸟内置的[背景色](https://vue3.tuniaokj.com/zh-CN/guide/style/background.html)、hex、rgb、rgba | String | - | - |
|
||
| tag-text-color | 标签文字颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| show-more | 显示右边更多操作区域 | Boolean | `true` | `false` |
|
||
| show-hot | 显示热度数量 | Boolean | `true` | `false` |
|
||
| active-hot | 是否激活热度 | Boolean | `false` | `true` |
|
||
| hot-count | 热度数量数据 | Number | 0 | - |
|
||
| hot-icon | 热度数量图标 | String | rocket | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| active-hot-icon | 激活时热度数量图标 | String | rocket-fill | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| hot-color | 热度数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| active-hot-color | 激活时热度数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| show-comment | 显示评论数量 | Boolean | `true` | `false` |
|
||
| active-comment | 是否激活评论 | Boolean | `false` | `true` |
|
||
| comment-count | 评论数量数据 | Number | 0 | - |
|
||
| comment-icon | 评论数量图标 | String | comment | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| active-comment-icon | 激活时评论数量图标 | String | comment-fill | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| comment-color | 评论数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| active-comment-color | 激活时评论数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| show-like | 显示点赞数量 | Boolean | `true` | `false` |
|
||
| active-like | 是否激活点赞 | Boolean | `false` | `true` |
|
||
| like-count | 点赞数量数据 | Number | 0 | - |
|
||
| like-icon | 点赞数量图标 | String | like | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| active-like-icon | 激活时点赞数量图标 | String | like-fill | [图标有效值](https://vue3.tuniaokj.com/zh-CN/component/icon.html) |
|
||
| like-color | 点赞数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| active-like-color | 激活时点赞数量图标颜色，支持图鸟内置的[颜色值](https://vue3.tuniaokj.com/zh-CN/guide/style/text.html)、hex、rgb、rgba | String | - | - |
|
||
| show-view-user | 显示查看用户头像信息 | Boolean | `true` | `false` |
|
||
| view-count | 实际查看数量数据 | Number | 0 | - |
|
||
| view-user-avatars | 查看用户头像列表 | String[] | [] | - |
|
||
| max-view-user-avatar-count | 最大显示用户头像数量 | Number | 4 | - |
|
||
|
||
### Slots
|
||
|
||
| 插槽名 | 说明 |
|
||
| -------------- | ---------------- |
|
||
| briefOperation | 顶部右边操作区域 |
|
||
| bottomRight | 底部右边操作区域 |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 说明 | 类型 |
|
||
| ----------------- | ---------------------------- | ------------ |
|
||
| click | 图文卡片点击事件 | `() => void` |
|
||
| avatar-view-click | 发布者头像和查看数量点击事件 | `() => void` |
|
||
| more-click | 更多按钮点击事件 | `() => void` |
|
||
| hot-click | 热度数量点击事件 | `() => void` |
|
||
| comment-click | 评论数量点击事件 | `() => void` |
|
||
| like-click | 点赞数量点击事件 | `() => void` |
|