| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import type { GroupMemberLite } from './group-member.vue' |
|---|
| | | |
|---|
| | | import { ImFriendAddSource } from '../../../utils/constants' |
|---|
| | | import { UserAvatar } from '../user' |
|---|
| | | |
|---|
| | | defineOptions({ name: 'ImGroupMemberGrid' }) |
|---|
| | | |
|---|
| | | withDefaults( |
|---|
| | | defineProps<{ |
|---|
| | | clickable?: boolean // 头åç¹å»æ¯å¦å¼¹ UserInfoCardï¼éæ©å¨å®«æ ¼ééè¦ä¿æå
³éï¼é¿å
åå¾é交äºå²çª |
|---|
| | | groupName?: string // 群åï¼å 好åæ¶æ¼ãææ¯ 'XX 群' ç YYãè¯æ¯ï¼è½åº add_source=GROUP |
|---|
| | | member: GroupMemberLite |
|---|
| | | size?: number // 头ååç´ å¤§å°ï¼é»è®¤ 38ï¼å
¼å®¹éæ©å¨å³ä¾§å·²éåºï¼ï¼ç¾¤ä¿¡æ¯æ½å±ä¼ 50 对é½å¾®ä¿¡ PC |
|---|
| | | }>(), |
|---|
| | | { |
|---|
| | | clickable: false, |
|---|
| | | size: 38, |
|---|
| | | groupName: '' |
|---|
| | | } |
|---|
| | | ) |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <!-- |
|---|
| | | 群æåå®«æ ¼åå
|
|---|
| | | - å®«æ ¼å±ç¤ºçæå°åä½ï¼å¤´åå¨ä¸ãååå¨ä¸ï¼å宽 = size + 16ï¼èªéåº size çå¼å¸ç©ºé´ |
|---|
| | | - 被 GroupMemberPickerPanel å³ä¾§å·²éåºï¼grid å½¢æï¼ãConversationGroupSide 群æååºå¾ªç¯ä½¿ç¨ |
|---|
| | | --> |
|---|
| | | <div |
|---|
| | | class="relative flex flex-col items-center px-0.5 py-1" |
|---|
| | | :style="{ width: `${size! + 16}px` }" |
|---|
| | | > |
|---|
| | | <UserAvatar |
|---|
| | | :id="member.userId" |
|---|
| | | :url="member.avatar" |
|---|
| | | :name="member.nickname" |
|---|
| | | :size="size" |
|---|
| | | :clickable="clickable" |
|---|
| | | :add-source="ImFriendAddSource.GROUP" |
|---|
| | | :add-source-extra="groupName" |
|---|
| | | /> |
|---|
| | | <div |
|---|
| | | class="w-full mt-1 overflow-hidden text-12px leading-[18px] text-center truncate text-[var(--ant-color-text)]" |
|---|
| | | > |
|---|
| | | {{ member.showName }} |
|---|
| | | </div> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
