mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-06 23:21:16 +08:00
135 lines
2.7 KiB
Vue
135 lines
2.7 KiB
Vue
<template>
|
||
<NuxtLink
|
||
:to="resolvedLink"
|
||
class="base-user-avatar"
|
||
:class="wrapperClass"
|
||
:style="wrapperStyle"
|
||
v-bind="wrapperAttrs"
|
||
>
|
||
<BaseImage :src="currentSrc" :alt="altText" class="base-user-avatar-img" @error="onError" />
|
||
</NuxtLink>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, watch } from 'vue'
|
||
import { useAttrs } from 'vue'
|
||
import BaseImage from './BaseImage.vue'
|
||
|
||
const DEFAULT_AVATAR = '/default-avatar.jpg'
|
||
|
||
const props = defineProps({
|
||
userId: {
|
||
type: [String, Number],
|
||
default: null,
|
||
},
|
||
src: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
alt: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
width: {
|
||
type: [Number, String],
|
||
default: null,
|
||
},
|
||
rounded: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
disableLink: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
to: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
})
|
||
|
||
const attrs = useAttrs()
|
||
|
||
const currentSrc = ref(props.src || DEFAULT_AVATAR)
|
||
|
||
watch(
|
||
() => props.src,
|
||
(value) => {
|
||
currentSrc.value = value || DEFAULT_AVATAR
|
||
},
|
||
)
|
||
|
||
const resolvedLink = computed(() => {
|
||
if (props.to) return props.to
|
||
if (props.userId !== null && props.userId !== undefined && props.userId !== '') {
|
||
return `/users/${props.userId}`
|
||
}
|
||
return null
|
||
})
|
||
|
||
const altText = computed(() => props.alt || '用户头像')
|
||
|
||
const sizeStyle = computed(() => {
|
||
if (!props.width && props.width !== 0) return null
|
||
const value = typeof props.width === 'number' ? `${props.width}px` : props.width
|
||
if (!value) return null
|
||
return { width: value, height: value }
|
||
})
|
||
|
||
const wrapperStyle = computed(() => {
|
||
const attrStyle = attrs.style
|
||
return [sizeStyle.value, attrStyle]
|
||
})
|
||
|
||
const wrapperClass = computed(() => [attrs.class, { 'is-rounded': props.rounded }])
|
||
|
||
const wrapperAttrs = computed(() => {
|
||
const { class: _class, style: _style, ...rest } = attrs
|
||
return rest
|
||
})
|
||
|
||
function onError() {
|
||
if (currentSrc.value !== DEFAULT_AVATAR) {
|
||
currentSrc.value = DEFAULT_AVATAR
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.base-user-avatar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-color: var(--avatar-placeholder-color, #f0f0f0);
|
||
/* 先用box-sizing: border-box，保证加border后宽高不变，圆形不变形 */
|
||
box-sizing: border-box;
|
||
border: 1.5px solid var(--normal-border-color);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.base-user-avatar:hover {
|
||
box-shadow: 0 4px 24px rgba(251, 138, 138, 0.1);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.base-user-avatar:active {
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.base-user-avatar.is-rounded {
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.base-user-avatar:not(.is-rounded) {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.base-user-avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
</style>
|