| | |
| | | :size="80" |
| | | :src="playerInfo.avatarUrl" |
| | | :style="{ backgroundColor: avatarBgColor }" |
| | | class="clickable-avatar" |
| | | @click="handleAvatarClick" |
| | | > |
| | | {{ playerInfo.name ? playerInfo.name.charAt(0) : '?' }} |
| | | </el-avatar> |
| | |
| | | <p>{{ playerInfo.description }}</p> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 头像预览对话框 --> |
| | | <el-dialog |
| | | v-model="previewVisible" |
| | | title="头像预览" |
| | | width="500px" |
| | | :show-close="true" |
| | | center |
| | | > |
| | | <div class="avatar-preview-container"> |
| | | <img |
| | | v-if="playerInfo.avatarUrl" |
| | | :src="playerInfo.avatarUrl" |
| | | class="preview-image" |
| | | alt="头像预览" |
| | | /> |
| | | <div v-else class="no-avatar"> |
| | | <el-icon size="80"><Picture /></el-icon> |
| | | <p>暂无头像</p> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { computed } from 'vue' |
| | | import { ElAvatar, ElIcon } from 'element-plus' |
| | | import { Phone } from '@element-plus/icons-vue' |
| | | import { computed, ref } from 'vue' |
| | | import { ElAvatar, ElIcon, ElDialog } from 'element-plus' |
| | | import { Phone, Picture } from '@element-plus/icons-vue' |
| | | |
| | | const props = defineProps({ |
| | | playerInfo: { |
| | |
| | | } |
| | | }) |
| | | |
| | | // 响应式数据 |
| | | const previewVisible = ref(false) |
| | | |
| | | // 头像点击处理 |
| | | const handleAvatarClick = () => { |
| | | if (props.playerInfo.avatarUrl) { |
| | | previewVisible.value = true |
| | | } |
| | | } |
| | | |
| | | // 根据姓名生成头像背景色 |
| | | const avatarBgColor = computed(() => { |
| | | if (!props.playerInfo.name) return '#409EFF' |